el-tree 动态切换lazy后load不生效
时间: 2023-10-25 14:05:54 浏览: 138
可能是因为在动态切换 `lazy` 后需要重新触发 `load`,以确保加载正确的节点数据。可以尝试在 `lazy` 属性发生变化时,手动调用 `load` 方法,如下所示:
```html
<el-tree
:lazy="isLazy"
:load="loadData"
:data="treeData"
/>
```
```javascript
data() {
return {
isLazy: true,
treeData: []
}
},
methods: {
loadData(node, resolve) {
// 加载节点数据的代码
},
toggleLazy() {
this.isLazy = !this.isLazy;
this.$refs.tree.$children[0].$tree.store._initDefaultCheckedNodes(); // 解决选中状态丢失的问题
this.$refs.tree.$children[0].$tree.store._initDefaultCheckedKeys(); // 解决选中状态丢失的问题
this.$refs.tree.$children[0].$tree.store._setCheckedKeys(this.$refs.tree.$children[0].$tree.store._getAllCheckedNodes()); // 解决选中状态丢失的问题
this.$nextTick(() => {
this.$refs.tree.$children[0].$tree.store.currentNode = null; // 清空当前节点,解决节点展开状态异常的问题
this.$refs.tree.$children[0].$tree.handleExpand(null, false); // 折叠所有节点,解决节点展开状态异常的问题
this.$refs.tree.$children[0].$tree.handleExpand(null, true); // 展开所有节点,触发load方法,加载数据
});
}
}
```
在切换 `lazy` 属性时,需要手动重置选中状态和展开状态,以避免状态异常的问题。然后,使用 `$nextTick` 方法确保在更新 DOM 后再触发加载数据的方法。这样应该就可以解决动态切换 `lazy` 后 `load` 不生效的问题了。
阅读全文