ElementUI中tree控件的坑怎么解決

這篇文章主要講解了“ElementUI中tree控件的坑怎么解決”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“ElementUI中tree控件的坑怎么解決”吧！

一句話總結(jié)，就是很好很強大。但是ElementUI中樹的加載可以通過load屬性一個一個懶加載，在官方的案例中有這種用法，個人非常不推薦這種用法，很麻煩，節(jié)點的動態(tài)刪除和修改都很麻煩，我一開始就使用了這個，后來發(fā)現(xiàn)動態(tài)添加節(jié)點、刪除節(jié)點、節(jié)點過濾統(tǒng)統(tǒng)都很麻煩，然后換個思路，使用data，所有問題一下就都解決了。使用data思路如下：在tree中使用data屬性加載數(shù)據(jù)，后期所有涉及到節(jié)點動態(tài)添加刪除的事，我們統(tǒng)統(tǒng)只去操作data就可以了，這也符合數(shù)據(jù)驅(qū)動視圖的思想。

1.在頁面加載時，我在mounted方法中就去獲取了所有的部門數(shù)據(jù)，然后直接加載到樹上（這種方式比較省事，特別是處理后面動態(tài)添加刪除時很方便，小伙伴在工作中可以根據(jù)實際情況選取合適的策略）。核心代碼如下：

this.getRequest("/system/basic/dep/-1").then(resp=> {
    _this.treeLoading = false;
    if (resp && resp.status == 200) {
    _this.treeData = resp.data;
    }
})

2.添加節(jié)點時，當服務(wù)端添加成功后，會返回剛剛添加的節(jié)點的json，通過遞歸找到這一段json所在的位置，動態(tài)假如到樹中。遞歸過程如下:

setDataToTree(treeData,pId,respData){
for(var i=0;i<treeData.length;i++) {
    var td = treeData[i];
    if(td.id==pId) {
    treeData[i].children=treeData[i].children.concat(respData);
    return;
    }else{
    this.setDataToTree(td.children, pId, respData);
    }
}
}

這是通過遞歸找到添加的位置，動態(tài)添加。

3.刪除節(jié)點時，當服務(wù)端返回刪除成功時，一樣找到刪除節(jié)點的位置，動態(tài)從樹中刪除。核心代碼如下:

deleteLocalDep(treeData,data){
for(var i=0;i<treeData.length;i++) {
    var td = treeData[i];
    if(td.id==data.id) {
    treeData.splice(i, 1);
    return;
    }else{
    this.deleteLocalDep(td.children, data);
    }
}
}

這也是在刪除成功后，通過遞歸找到刪除的位置，動態(tài)刪除數(shù)據(jù)。

4.由于我采用了一次性加載所有部門的策略，所以節(jié)點過濾這塊特別容易，基本上完全參考官方案例就能實現(xiàn)。

感謝各位的閱讀，以上就是“ElementUI中tree控件的坑怎么解決”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對ElementUI中tree控件的坑怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！