在用 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打印、截图红框)
代码运行起来后,报错如下:
点击第一行 at Node.insertChild (element-ui.common.js?ccbf:22374),进去(问题在-红框处):
2-新增节点后刷新异常:
a:父节点未展开(lazy-load)时,新增无效:根本看不到新增节点、一旦展开(load)新读取数据会覆盖 --- (以下截图 逐步演示)
第一步: F5 刷新完成:
第二步,直接新增:
(。。。看不出效果)
第三步,点击类目3的小三角、懒加载 子节点中并没有之前新增的子节点(确认原先新增子节点已被覆盖)
b:如果父节点之前已经展开,则新增操作正常。
3-另外需要问的是:懒加载情况下、刷新节点问题(这个现在无解...)
咱俩的问题是一样的 , 增删改查的操作都是和后台交互的,单纯在前端修改应该是不行的,我现在修改之后采用的是:load中有个resolve去操作,但是他的这个方法会随着展开的节点改变this指向,还是不尽人意,说白了是缺少一个更新指定节点的api