The new node added by the append method after the [Bug Report] tree control lazily loads the node from the database makes the other sibling children disappear

[fosin]

Element UI version

2.4.5

OS/Browsers version

windows10 chrome 67

Vue version

2.5.17

Reproduction Link

https://jsfiddle.net/28860823/mmx38qxw/4619/

Steps to reproduce

是通过数据库懒加载的数据才会有这个问题，所以问题无法通过这个地址重现，上面重现地址是没有问题的，描述一下问题：
tree控件懒加载模式下，通过数据库懒加载出来的节点，通过append方法增加的子节点会把其他子节点搞消失了，调试发现节点数据data.children都是空的，当通过append添加节点后，data.children确实有刚添加的节点的数据，但是其他同级节点就不会在界面上消失了。

原因分析：tree控件会优先从data.children中加载节点，其次才会从childNodes中加载节点，那么当我们append节点后手动将data.children置空即可

临时解决方案：
const pNode = this.$refs.organizTree.getNode(this.form.pId)
this.$refs.organizTree.append(response.data.data, pNode)
// 以下代码启用后可以解决tree控件bug(会导致原有子节点丢失问题)
pNode.data.children = null

What is Expected?

正常情况append增加的子节点应该排在其他子节点之后，而不是只剩下增加的子节点

What is actually happening?

tree控件从数据库懒加载节点后通过append方法增加的新节点会把其他同级子节点搞消失

[element-bot]

Translation of this issue:

Element UI version
2.4.5

OS/Browsers version
Windows10 chrome 67

Vue version
2.5.17

Reproduction Link
https://jsfiddle.net/28860823/mmx38qxw/4619/

Steps to reproduce
It's a problem that can be done by lazy data from the database, so the problem can't be reproduced through this address. It's no problem to reproduce the address, and describe the problem:

Tree control lazy loading mode, through the database lazy loaded nodes, the append method added sub nodes will dissolve the other sub nodes, debugging found that the node data data.children is empty, when the node is added through the append, data.children does have just added node data, but other same The level nodes will not disappear on the interface.
Cause analysis: the tree control will first load the node from the data.children, and then load the node from the childNodes, then the data.children is empty after the append node.

Temporary solutions:
Const pNode = this.$refs.organizTree.getNode (this.form.pId)

This.$refs.organizTree.append (response.data.data, pNode)
/ / when the following code is enabled, you can solve the tree control bug (which causes the original child node to lose).

PNode.data.children = null
What is Expected?

In normal cases, the child nodes added to append should be placed after the other sub nodes, instead of only the additional child nodes.
What is actually happening?

The tree control adds lazy nodes to the database, and the new nodes added by the append method will dissolve the other peers.

[ziyoung]

@186A8 我把 append 节点的操作放在 setTimeout 里，也不会有问题呀。https://jsfiddle.net/zhiyang/mmx38qxw/4642/
看看能否提供一个可以重现问题的链接，😅这样的话，我们才能定位问题。

[fosin]

找到原因了，应该是懒加载场景下，当数据的孩子节点元素值为null就会出这个问题，但是懒加载场景下节点的孩子数据一般都是空的啊
以下是重现地址，就是zones为null就会出现这个问题
https://jsfiddle.net/mmx38qxw/4651/

[ziyoung]

@186A8 修复了该问题。不过在懒加载时，至少要等节点数据加载完成后，再手动添加新的节点。
懒加载时，如果设置了 data ，那么这个值将会被忽略。https://jsfiddle.net/zhiyang/phbrcn3z/1/

[fosin]

好呢，啥时候告诉一声