elementUI tree 懶加載 更新節點

最近在項目中用到了 elementUI 的懶加載 tree 組件，由於項目裏有新增、修改、刪除節點的功能，使用了之後發現不能主動更新 tree 的數據，查閱資料，發現找不到解決的方案，最後嘗試了 N 多種方法，最後終於搞定了。

先上一部分代碼

html 部分

<el-tree
    :load="loadNode"
    lazy
    :props="props"
    ref="tree"
    node-key="id"
    :expand-on-click-node="false"
    style="margin-top: 10px;">

    <span slot-scope="{ node, data }">
        <span>{{ `課程：${node.label}` }}</span>
        <span style="margin-left: 100px; font-size: 14px;">
            <el-button
                type="text"
                size="mini"
                @click="() => editNode(node, data)">
                修改課程
            </el-button>
            <el-button
                v-if="node.level === 1"
                type="text"
                size="mini"
                @click="() => addNode(node, data)">
                新增課程
            </el-button>
            <el-button
                type="text"
                size="mini"
                style="color: #fd8076"
                @click="() => delTree(node, data)">
                刪除課程
            </el-button>
        </span>
    </span>
</el-tree>

加載數據的方法

loadNode (node, resolve) {
    // 這裏是由於1、二級的節點請求的接口不同，因此作一些處理，不用管這個
    const url = node.level === 0 ? this.treeUrlHash[node.level] : `${this.treeUrlHash[node.level]}/${node.data.id}`
    this.$http('get', url)
        .then(res => {
            if (res.code === '200') {
                resolve(res.data)
            }
        })
}

下面我用新增節點來講明：

• 第一種解決方案，可以使用官方提供的 append 方法，代碼以下，nodeData 就是你新增的數據。可是這種方法有一個問題，這只是前臺在添加完成後（接口返回成功），僞造的一條數據，目的只是讓用戶看到添加成功了一條數據，並無從新請求接口並刷新全部的節點。問題來了，若是新增成功之後，不作任何操做（不刷新頁面），去刪除此節點，會發現此節點沒有 ID ，刪除不了，也就是說添加成功後咱們前端沒有拿到屬於該節點的 ID ，因此無法刪除。

添加節點方法

addNode (node, data) {
    const nodeData = {name: '新增節點'}
    this.$refs.tree.append(nodeData, node)
},

那麼怎麼處理呢，能夠與後臺協商，在添加成功對接口裏返回該節點對 ID，而後 append 節點的時候，把此節點的 ID 也添加進去，就 OK 了。

• 第二種解決方案：能夠在第一次加載數據的時候，把 loadNode 的 2 個參數保存下來，而後添加節點的時候，從新調用一下這個方法就能夠了。下面是代碼：

加載數據的方法

loadNode (node, resolve) {
    // isFirst 爲了保證只在第一次加載的時候進行
    if (this.isFirst) {
        this.node = node
        this.resolve = resolve
        this.isFirst = false
    }
    // 這裏是由於 1 2 級的節點請求的接口不同，因此作一些處理
    const url = node.level === 0 ? this.treeUrlHash[node.level] : `${this.treeUrlHash[node.level]}/${node.data.id}`
    this.$http('get', url)
        .then(res => {
            if (res.code === '200') {
                resolve(res.data)
            }
        })
}

添加節點方法

addNode (node, data) {
    this.node.childNodes = [] // 這裏把子節點清空，是由於再次調用 loadNode 的時候會往 childNodes 裏 push 節點，因此會有節點重複的狀況。
    this.loadNode(this.node, this.resolve)
},

這樣就能夠主動刷新節點數據了。若是有更好的辦法或者哪些地方不正確，但願你們指正，謝謝。