el-tree 部门 懒加载
时间: 2023-05-30 18:07:18 浏览: 283
el-tree 组件的懒加载功能可以通过使用 load 方法来实现。具体步骤如下:
1. 在 el-tree 组件中设置 lazy 属性为 true,表示开启懒加载功能。
2. 在 el-tree 组件中设置 load 方法,该方法会在节点需要展开时被调用。
3. 在 load 方法中,根据需要展开的节点信息,异步加载该节点的子节点数据,并调用回调函数将数据传递给 el-tree 组件。
以下是一个简单的示例:
```html
<template>
<el-tree :data="data" :lazy="true" :load="loadNode"></el-tree>
</template>
<script>
export default {
data() {
return {
data: [{
label: 'Node 1',
isLeaf: false
}]
};
},
methods: {
loadNode(node, resolve) {
setTimeout(() => {
resolve([
{
label: 'Node 1-1',
isLeaf: true
},
{
label: 'Node 1-2',
isLeaf: true
}
]);
}, 1000);
}
}
};
</script>
```
在上面的示例中,loadNode 方法会在节点需要展开时被调用。在该方法中,我们使用 setTimeout 模拟异步加载数据的过程,并在数据加载完成后调用 resolve 函数将数据传递给 el-tree 组件。在 resolve 函数中,我们返回一个包含子节点数据的数组。在实际开发中,我们可以通过网络请求或其他方式异步加载数据。
阅读全文