页面使用树表结构嵌套很多层时,页面加载慢,为了解决这个问题使用了懒加载,也就是一开始只展示最外层的数据,会很快的加载页面,然后点击树节点时通过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也可以解决。