element UI 树控件 懒加载状态、对树增删改操作后,如何更新?

在用 element UI 的树形控件(el-tree),采用懒加载(lazy + :load="loadNode"方法 )形式,业务是:
1-新增一级节点
2-任何节点可新增子节点
3-编辑节点
4-删除节点
---------( 遇到的问题 )------------
1-新增一级节点,采用 “insertAfter” 无法使用

bus.$on("adddd", function(nc){
  console.log("ssssssssssssssssss")
  console.log(nc)
  console.log(_this.lastOne)
  _this.$refs.tree.insertAfter(nc, _this.lastOne);
})

nc是“newChild”新增(一级)节点、(请看 console打印)
this.lastOne是一级目录最后一个节点“1111”的data(请看 console打印、截图红框)
clipboard.png

代码运行起来后,报错如下:
clipboard.png

点击第一行 at Node.insertChild (element-ui.common.js?ccbf:22374),进去(问题在-红框处):
clipboard.png

2-新增节点后刷新异常:
a:父节点未展开(lazy-load)时,新增无效:根本看不到新增节点、一旦展开(load)新读取数据会覆盖 --- (以下截图 逐步演示)

第一步: F5 刷新完成:
clipboard.png

第二步,直接新增:
clipboard.png

(。。。看不出效果)
clipboard.png

第三步,点击类目3的小三角、懒加载 子节点中并没有之前新增的子节点(确认原先新增子节点已被覆盖)
clipboard.png

b:如果父节点之前已经展开,则新增操作正常。

3-另外需要问的是:懒加载情况下、刷新节点问题(这个现在无解...)

阅读 14.3k
6 个回答

咱俩的问题是一样的 , 增删改查的操作都是和后台交互的,单纯在前端修改应该是不行的,我现在修改之后采用的是:load中有个resolve去操作,但是他的这个方法会随着展开的节点改变this指向,还是不尽人意,说白了是缺少一个更新指定节点的api

我也遇到这个问题了,也是用的1楼的方法,但加载的节点跑到根节点下面了
用updateKeyChildren

新手上路,请多包涵

能说说最后是怎么解决这个问题吗?

我是这样操作的,能满足需求
每次添加操作完成时,通过updateKeyChildren把当前父节点的id返回后台查询到新增后的下一级节点数据,数组形式,
然后调用updateKeyChildren(父节点id,子节点数组)

新手上路,请多包涵

我实现了右键菜单新增和删除节点,双击编辑节点。

推荐问题
宣传栏