<el-tree
        ref="tree"
        :props="{ children: 'child', label: 'deptName', isLeaf: 'leaf' }"
        node-key="sysDeptId"
        :expand-on-click-node="true"
        :load="loadNode"
        lazy
        @node-click="handleNodeClick"
      />

有這個懶加載并且刷新需求的老鐵肯定涉及到了節(jié)點中子節(jié)點數(shù)據(jù)的增刪改！??！

方法1

推薦，此方法有效避免直接調(diào)用loadNode(node, resolve)函數(shù)，可以間接從組件內(nèi)部觸發(fā)load事件，這樣就不需要緩存resolve這個不好拿到的入?yún)?。省去后續(xù)很多麻煩事，特別是由于懶加載只加載一次導(dǎo)致緩存的數(shù)據(jù)和方法不匹配當(dāng)前點擊的節(jié)點，從而導(dǎo)致增刪改樹結(jié)構(gòu)數(shù)據(jù)時顯示異常的問題，方法2中有詳細(xì)說明。

// 刷新某個樹節(jié)點，重點?。。。?refreshNode(key) {
    // 獲取當(dāng)前節(jié)點，key可以在@node-click和:load綁定函數(shù)的回調(diào)參數(shù)node用變量存儲后有需要刷新的地方取node.key
    let node = this.$refs.tree.getNode(key);
    //  設(shè)置未進(jìn)行懶加載狀態(tài)
    node.loaded = false;
    // 重新展開節(jié)點就會間接重新觸發(fā)load達(dá)到刷新效果
    node.expand();
 },

方法2

可以在第一次懶加載數(shù)據(jù)的時候，把 loadNode 的 2 個參數(shù)保存下來，然后添加節(jié)點的時候，重新調(diào)用一下這個方法就可以了

不推薦，由于loadNode只會針對某個節(jié)點加載一次，后續(xù)再點擊你點過的這個節(jié)點的小箭頭不會再次觸發(fā)loadNode，這容易讓緩存的兩個數(shù)據(jù)this.node和this.resolve與當(dāng)前點擊節(jié)點不匹配（比如你點擊了未懶加載過的小箭頭，再去點已經(jīng)懶加載過的其他小箭頭或者節(jié)點，這時候由于已懶加載的不會再觸發(fā)loadNode函數(shù)，而你緩存的this.node和this.resolve卻是上一次的，這種情況下如果你在當(dāng)前點擊的節(jié)點對子節(jié)點進(jìn)行增刪改請求后去手動調(diào)用loadNode傳入this.node和this.resolve刷新樹節(jié)點，由于傳入的數(shù)據(jù)都是上一次的，那么就會出現(xiàn)你請求的新的樹節(jié)點數(shù)據(jù)跑到上一次觸發(fā)懶加載緩存的節(jié)點去的情況，這時樹結(jié)構(gòu)的數(shù)據(jù)就顯示異常了)

// 節(jié)點懶加載事件
loadNode (node, resolve) {
    // loadNode 的 2 個參數(shù)保存下來方便下次手動調(diào)用傳入
    this.node = node
    this.resolve = resolve
    // 你的請求邏輯
    ...
    ...
},
refreshNode () {
    this.node.childNodes = [] // 這里把子節(jié)點清空，是因為再次調(diào)用 loadNode 的時候會往 childNodes 里 push 節(jié)點，所以會有節(jié)點重復(fù)的情況。
    // 把剛剛存的兩個變量手動傳入調(diào)用
    this.loadNode(this.node, this.resolve)
},

解決辦法：繁瑣容易出錯，做過各種嘗試都不太理想，不再深究。

方法3

可使用官方提供的 append 方法，代碼如下，nodeData 就是你新增的數(shù)據(jù)。但是這種方法有一個問題，這只是前臺在添加完成后（接口返回成功），偽造的一條數(shù)據(jù)，目的只是讓用戶看到添加成功了一條數(shù)據(jù)，并沒有重新請求接口并刷新所有的節(jié)點。

不推薦，如果新增成功以后，不做任何操作（不刷新頁面），去刪除此節(jié)點，會發(fā)現(xiàn)此節(jié)點沒有 ID ，刪除不了，也就是說添加成功后我們前端沒有拿到屬于該節(jié)點的 ID ，所以沒法刪除。

添加節(jié)點方法

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

解決辦法：可以與后臺協(xié)商，在添加成功對接口里返回該節(jié)點對 ID，然后 append 節(jié)點的時候，把此節(jié)點的 ID 也添加進(jìn)去，就 OK 了。