el-table-tree使用懒加载时,内部节点不更新的问题

页面使用树表结构嵌套很多层时,页面加载慢,为了解决这个问题使用了懒加载,也就是一开始只展示最外层的数据,会很快的加载页面,然后点击树节点时通过el-table中load方法再向后端索要内层数据 ,并放回到页面上。

理论上到这一步就结束了,但是存在一个问题就是当对树节点进行增删改的时候,数据并没有更新 ,说明内部数据修改的时候它并不能监听到内部数据的变化,需要手动调用load函数来更改变化的内容。

load函数主要做的两件事:

1.向后端请求更新数据,2.更新前端页面

调用load函数需要传递三个参数

 row(要改变的节点行数据),treeNode(节点),resolve(element内部封装的回调,将请求回来的数据放到页面上),哪个节点需要更新就手动调用load并将相应的行数据传参,这样就能更新了 ,然后load内部主要是更改了  table.value.store.states.lazyTreeNodeMap的值来进行页面更新的。(这个table是我给el-table的ref起的名字)

解决方案

解决方案1:

直接更改table.value.store.states.lazyTreeNodeMap的值也可以进行内部更新。这个也是做本质的做法。

解决方案2:

我们可以将数据用map函数进行存储,在加载load时,将参数以键值对的形式储存起来,然后增删改的时候调用就行了。

删改操作都大体相同,找到对应的父节点的map,然后调用load函数就可以了。

遇到的问题以及解决方式

增加的时候,是更新此节点以下的内容,所以要找此节点的map,然后调用load函数,这就又存在了一个问题当我没有点击节点时,map函数中并没有存储此节点的map,这就会导致数据不更新,所以要判断当没有子节点的map时,调用父节点map,然后load调用。

或者在我新建完成点击保存时,就将该节点的ischildren的值设置为true也可以解决。

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值