el-tree 动态切换lazy后load不生效,如何解决
时间: 2024-05-08 21:22:31 浏览: 11
el-tree 的 lazy load 是通过指定 `load` 方法来实现的,而动态切换 lazy 后需要重新调用 `load` 方法才能生效。
你可以尝试在 `el-tree` 的 `props` 中设置 `lazy` 属性为 `true`,并且在 `load` 方法中根据传入的 `node` 参数判断出该节点是否需要进行懒加载,如果需要则发送请求获取子节点数据并返回。在切换 lazy 前,先将 `lazy` 属性设置为 `false`,然后刷新 `el-tree`,之后再将 `lazy` 属性设置为 `true` 即可。
示例代码如下:
```html
<el-tree
:data="treeData"
:props="treeProps"
:lazy="isLazy"
:load="loadData"
></el-tree>
```
```js
data() {
return {
isLazy: true,
treeData: [],
treeProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
loadData(node, resolve) {
if (node.level === 0) {
// 根节点,直接加载
this.fetchData(resolve)
} else {
// 子节点,判断是否进行懒加载
if (node.lazy === true) {
this.fetchData(resolve)
} else {
resolve([])
}
}
},
fetchData(resolve) {
// 发送请求获取子节点数据
// 请求成功后,将数据传给 resolve() 方法
// resolve() 方法会将数据渲染到对应节点下
},
switchLazy() {
// 切换 lazy
this.isLazy = false
this.$nextTick(() => {
this.isLazy = true
})
}
}
```
在切换 lazy 后,记得要重新加载根节点的数据,否则根节点下的子节点将无法显示。