element-ui tree配置懒时,修改节点数据后,更新tree的方法

// 页面代码
<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版权协议,转载请附上原文出处链接和本声明。