最近项目碰到了个问题
待我细细道来,是这样的,这图只是一个部门图,但是部门大家都知道,父级部门底下有无数个儿子部门,儿子部门下面又是一堆孙子部门.... 所以传统的树形表格加载就不适用了(浏览器界面会严重卡顿),此时需要用到懒加载了,点一下左边的小箭头就请求一次后台接口,大大的减少了页面卡顿问题。
但是,问题来了,如图所示,右边有增删改三个按钮,按照正常人的操作,当我进行增的时候,比如我在温岭下面新增一个 温岭一号 , 那么就应该请求新增接口,再请求表格页面刷新接口,但是呢,后台接口的数据是接收到了,新增正常,页面却没有产生变化。有朋友说可以将 再请求表格页面刷新接口 以后的data为空再重新赋值,这样就可以看到变化了
但是,问题来了,首先,这是懒加载,每次需要点击请求一次接口才能返回下一级的内容 其次 用户可能在第五级进行增删改,总不可能用户还得一个一个点的去吧,这样按照正常人操作心态都会炸。也有同志说用官网文档的 expand-row-keys 树形,但是在懒加载用它不能一次性展开到第五级 它只能点一次触发一次。
于是乎 想了好久我有个法子,使用map记录记录父级ID,后期增删改取出
- 先在data(){return{}} 中添加个maps:new Map(),每次请求的时候都记录下当前的ID
- 然后点击增加按钮的时候,将当前行的数据保存,在进行增加提交操作的时候 ,从根据之前行保存的id从map中匹配找出来,
上面是我的问题解决方案
但是有个bug我还没解决,是这样的,使用上述解决方案,当我在当前行添加子级时,一种是展开当前行添加,这样用上述解决方案没有问题,但是如果用户没有展开当前行直接添加的话,就会报错了,因为没有展开当前行的话就没有请求后台数据返回当前行的儿子级数据。所以会报错了