el-tree 懒加载 如何初始化数据
时间: 2023-08-07 19:46:36 浏览: 49
要实现 el-tree 的懒加载,需要在树形组件中使用 lazy 属性,并在对应节点的数据对象中设置 hasChildren 和 lazy 属性。当 hasChildren 为 true 时,节点会显示为可展开状态,当第一次展开节点时,会触发 load 方法,该方法会异步加载子节点数据。
以下是一个 el-tree 懒加载的示例代码:
```html
<el-tree :data="treeData" :load="loadNode" :lazy="true"></el-tree>
```
```javascript
data() {
return {
treeData: [{
id: 1,
label: '节点1',
hasChildren: true,
lazy: true,
children: []
}]
}
},
methods: {
loadNode(node, resolve) {
// 异步加载数据
setTimeout(() => {
const children = [{
id: 2,
label: '节点2'
}, {
id: 3,
label: '节点3'
}]
resolve(children)
}, 1000)
}
}
```
在上面的代码中,treeData 数组中的节点对象中设置了 hasChildren 和 lazy 属性,表示该节点存在子节点,并且需要懒加载。loadNode 方法用于异步加载子节点数据,该方法需要传入两个参数,第一个参数是需要加载子节点的节点对象,第二个参数是一个回调函数,用于返回加载的子节点数据。在 loadNode 方法中,可以通过异步请求数据的方式,来加载该节点的子节点数据。