elementUI tree異步樹拖拽問題

1.異步樹第一層級的節點拖拽報錯問題

　 　報錯信息如下：

　　

 

 

原因：

　　elementUI在封裝tree時，會為tree添加一個頁面不可見的根結點，該節點的子集就是樹的第一層級的所有節點。

　　在節點拖拽時，會根據目標節點的父節點的data的值進行操作。

　　而構建異步樹時，elementUI忘了給異步樹的不可見的跟節點的data屬性賦值，所有拖拽至一級節點操作報錯。

 

解決方案：

　　手動為不可見的根結點添加上data的值，具體代碼如下

<el-tree
   lazy
   draggable
   ref="asyncTree"
  :load="loadNode"
  :node-key="id"
  :allow-drop="allowDrop"
  >
</el-tree>
...
<scripit>
    ...
    methods: {
        allowDrop (draggingNode, dropNode, type) {
            if(draggingNode.data.id !== dropNode.data.id) {
                if(!dropNode.parent.data) {
                    let temp = [];
                    dropNode.parent.childNodes.forEach(item => {
                        temp.push(item.data)
                    })
　　　　　　　　　　　　// 手動為跟節點添加上data屬性
                    dropNode.parent.data = temp;
                }
                return true;
            }
        },
    }
    ...
</script>