// 页面代码
<el-tree
ref="tree"
node-key="id"
:props="props"
:load="loadNode"
lazy
highlight-current
@node-click="handleNodeClick"
>
</el-tree>
// loadNode 函数
// getDepTree函数为自定义的ajax接口函数
async loadNode(node, resolve){
const {level} = node
let tree = []
if (level === 0) {
tree = await getDepTree()
} else {
tree = await getDepTree({admBranCode: node.data.branCode})
level >= 2 && tree.data.map(item => {return item.leaf = true})
}
return resolve(tree.data)
},
// 更新视图代码
update(){
let key = this.$refs.tree.getCurrentKey()
let node = this.$refs.tree.getNode(key)
// 请求
// 修改的关键代码,会重新触发loadNode函数
node.parent.loaded = false
node.parent.expand()
this.formEdit = false
},
以上代码经过我个人测试,暂时还没发现问题。在这里也发下之前网上找到的方案,测试发现都有问题,在这里也一并写上,免得误人子弟,浪费时间。
问题方案1:
在loadNode函数中将node、resolve在data中存储,在update函数调用更新对应节点tree。
问题:本项目树的层级为3层,element的tree配置懒加载后,同时展开多个2级,再选择某一个2级的3级,此时的node为最后展开2级的node,会导致视图不能正常更新
问题方案2:
直接调用
node.loaded = false;
node.expand()问题: 触发loadNode函数,获取本节点的子节点数据,不能获取本节点自身更新后的数据。故应是触发本节点的父级来更新本节点
node.parent.loaded = false;
node.parent.expand();
思考:
既然可以获取到node.parent,那么理论上用element提供的updateKeyChildren应该也可行,有待验证...
版权声明:本文为Canton_jack原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。