ElementUi Tree樹形控件的使用（增、刪）

最近開發使用el-tree樹形控件時,遇到不少問題，而且問題都是比較常用到的，這里記錄一下，僅供參考。

樹形頁面如下：

代碼如下：

<el-tree
        ref="tree"
        :load="loadNode"
        :props="props"
        node-key="id"
        :show-checkbox="false"
         lazy
         :highlight-current="true"
         @node-click="handleNodeClick">
</el-tree>

問題一：配置選項

el-tree默認顯示的字段key為label、children、isLeaf，但我們在實際開發中我們拿到的數據可能並不是這些字段，這就需要我們去配置，如下：

props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
 }

問題二: 異步加載數據

在開發中，我需要用到懶加載數據，即點擊當前節點才會去加載當前節點的數據，這里用的是vue，代碼如下：

         async loadNode (node, resolve) {
                // 這里第一層和其他層不是同一個接口，需要特殊處理。
                if (node.level === 0) {
                     // 操作第一層數據時，刷新節點時使用
                    this.treeCurrentNode = node 
                    // 第一層
                    const items = await this.$store.dispatch('organization/getCategory')
                    resolve(data)
                } else {
                    const data = await this.$store.dispatch('organization/getOrgTreeChild', { id: node.data.id })
                    data.forEach(ite => {
                        ite.leaf = ite.children.length === 0
                    })
                    resolve(data)
                }
         }

注意：
1、loadNode方法接受兩個參數node 和 resolve
2、node - 對象 - 當前樹結點信息
3、 resolve - 函數 - 傳遞當前node對象子結點的數據
4、這里通常我們異步方法來加載數據 不用擔心resolve調用之前會自動幫我們呈現loading方法

問題三： 新增、刪除后刷新固定節點數據

在el-tree進行某種操作之后，比如新增、刪除、編輯等，怎么去刷新操作的節點去更新數據？這個官方並沒有給出具體的方法，這里找到了一種，僅供參考。

以新增為例，currentNode為當前選中節點的數據，代碼如下：

addNew (data) {
   if (this.type === 'addNext') {
       // 添加當前節點的下一級
       // 根據當前節點的數據，找到當前的樹節點
       const treeNode = this.$refs.tree.getNode(this.currentNode)
        treeNode.expanded = true // 設置為展開
        treeNode.loaded = false
        treeNode.loadData() // 刷新當前節點
        this.$store.commit('organization/updateCurrentNode', data)
   } else {
           // 添加第一級的數據
          this.treeCurrentNode.loaded = false
          this.treeCurrentNode.loadData()
         this.$store.commit('organization/updateCurrentNode', data)
    }
}

還有一個常用的刷新節點的方法：刷新父節點數據 （刪除節點時一般會用到）

deleteItem (data) {
    const treeNode = this.$refs.tree.getNode(data)
     treeNode.parent.loaded = false
     treeNode.parent.loadData() // 刷新父節點數據
}

問題四：選中節點設置: setCurrentKey不起作用的問題處理

在新增、刪除操作成功之后，我們常常需要重新設置當前選中的節點，el官方給我們提供了方法setCurrentKey，但初次使用這個方法的小白，往往會遇到不起作用的問題。這是因為這個方法要和$nextTick搭配使用，否則數據未掛載，我們的設置並不能生效：

this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(data.id)
 })