el-tree加懒加载
时间: 2023-08-29 20:13:49 浏览: 41
el-tree组件支持懒加载,可以在需要的时候动态加载子节点,从而提高页面加载速度和用户体验。下面是一个简单的示例:
```html
<template>
<el-tree :lazy="true" :load="loadData">
</el-tree>
</template>
<script>
export default {
methods: {
loadData(node, resolve) {
// 加载子节点数据
// resolve方法用于将数据传递给el-tree组件
resolve([
{ id: 1, label: '节点1' },
{ id: 2, label: '节点2' },
{ id: 3, label: '节点3' }
])
}
}
}
</script>
```
在上面的示例中,我们将el-tree组件的`lazy`属性设置为`true`,表示开启懒加载。然后在`loadData`方法中,根据需要加载子节点数据,并使用`resolve`方法将数据传递给el-tree组件。当用户展开节点时,el-tree会自动调用`loadData`方法加载子节点数据。
需要注意的是,`loadData`方法应该是异步的,可以通过Promise实现。例如:
```html
<template>
<el-tree :lazy="true" :load="loadData">
</el-tree>
</template>
<script>
export default {
methods: {
loadData(node, resolve) {
// 模拟异步加载数据
setTimeout(() => {
resolve([
{ id: 1, label: '节点1' },
{ id: 2, label: '节点2' },
{ id: 3, label: '节点3' }
])
}, 1000)
}
}
}
</script>
```
在上面的示例中,我们使用`setTimeout`模拟异步加载数据,等待1秒后再将数据传递给el-tree组件。