解决el-table懒加载树新增、删除、修改节点不刷新问题

问题:使用el-table懒加载树,实现对表格数据的新增、修改、删除等操作,但是刷新问题很让人头疼,先是百度解决了修改、删除时的操作,但是新增迟迟不能解决,今天终于解决,记录一下

先定义一个map,存储当前节点的数据

删除代码:

 const { tree, treeNode, resolve } = row.parentId ? this.maps.get(row.parentId) : {}
        this.loadNode(tree, treeNode, resolve, true)

 修改:

 this.row = row.parentId ? this.maps.get(row.parentId) : {}

 在点修改按钮的时候,取到当前节点的map数据,修改成功之后,刷新数据

// 刷新列表
    refresh(row) {
      if (row) {
        // 调用打开子节点的方法
        const { tree, treeNode, resolve } = row
        this.loadNode(tree, treeNode, resolve, true)
      } else {
        this.getList()
      }
    },

一开始我新增完全按照修改逻辑开发的,但是实现不了,原因是,假如给一个没有子节点的节点新增一个子节点的话,这个时候还没有子节点,也就无法调用懒加载方法,所以这种方式行不通,后来多方百度,有建议展开当前节点的方法

  this.$refs['tree'].store.states.treeData[this.form.parentId],
                  'expanded',
                  true
                )

但是这种方式解决不了,有的节点新增还是成功,有的还是不行,所以放弃,最终解决代码如下:

 refreshRow(id) {
      const form = {
        parentId: id
      }
      listDeptByPid(form).then(res => {
        this.$set(this.$refs.tree.store.states.lazyTreeNodeMap, id, res.data)
      })
    },

 id为该节点的父节点id即为要刷新节点的id     res.data为要刷新节点的数据

tree.js的源码奉上:

 此组件在每次更新节点时都调用了该方法,其中的load方法就是我们绑定的懒加载方法;最终发现它实现节点更新的关键在于:

所以自己仿照写一个更新当前节点的子节点方法即可 

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值