el-tree懒加载 动态调用接口
时间: 2023-11-23 14:52:56 浏览: 137
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
5星 · 资源好评率100%
el-tree的懒加载可以通过设置lazy属性为true来实现。同时,需要在node-click事件中动态调用接口获取子节点数据。具体实现可以参考以下代码:
```html
<template>
<el-tree :data="data" :lazy="true" :load="loadNode" @node-click="handleNodeClick"></el-tree>
</template>
<script>
export default {
data() {
return {
data: []
}
},
methods: {
loadNode(node, resolve) {
// 调用接口获取子节点数据
axios.get('/api/getChildren', { params: { id: node.id } }).then(res => {
resolve(res.data)
})
},
handleNodeClick(node) {
// 点击节点时触发,可以在这里进行一些操作
}
}
}
</script>
```
阅读全文