el-tree不用懒加载但是展开节点的时候要有加载效果
时间: 2024-04-30 20:03:01 浏览: 46
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
5星 · 资源好评率100%
El-Tree 不使用懒加载时,可以通过设置 `lazy` 属性为 `false` 来禁用懒加载功能。而对于展开节点时的加载效果,可以通过监听 `node-click` 事件,在该事件中进行数据加载,并在加载完成后修改节点的 `loading` 属性来显示加载效果。例如:
```html
<el-tree :data="treeData" :lazy="false" @node-click="handleNodeClick">
<!-- ... -->
</el-tree>
```
```js
methods: {
handleNodeClick(node, data) {
if (data.children && data.children.length > 0) {
// 如果节点已有子节点,则直接展开
node.expanded = !node.expanded;
} else {
// 否则模拟异步加载数据
node.loading = true;
setTimeout(() => {
data.children = [{ label: '子节点' }];
node.loading = false;
node.expanded = true;
}, 1000);
}
}
}
```
在上述示例中,当节点被点击时会先判断该节点是否已有子节点,如果有则直接展开,否则通过 `setTimeout` 模拟异步加载数据,并在加载完成后将 `loading` 属性设为 `false` 显示加载效果,然后再将节点展开。您可以根据实际需要修改数据加载的方式和具体实现。
阅读全文