ElementUI中tree控件踩坑記

vhr部門管理模塊更新啦！爲了讓小夥伴們快速理解部門管理模塊實現思路，我想經過3篇短文來給你們介紹下大體的實現思路和核心代碼。

項目地址：https://github.com/lenve/vhr

1.SpringBoot+Vue先後端分離，使用SpringSecurity完美處理權限問題(一)
2.SpringBoot+Vue先後端分離，使用SpringSecurity完美處理權限問題(二)
3.SpringSecurity中密碼加鹽與SpringBoot中異常統一處理
4.axios請求封裝和異常統一處理
5.權限管理模塊中動態加載Vue組件
6.SpringBoot+Vue先後端分離，使用SpringSecurity完美處理權限問題(六)
7.vhr部門管理數據庫設計與編程
8.使用MyBatis輕鬆實現遞歸查詢與存儲過程調用

本文主要想說說ElementUI中Tree控件。坑不深。

一句話總結，就是很好很強大。可是ElementUI中樹的加載能夠經過load屬性一個一個懶加載，在官方的案例中有這種用法，我的很是不推薦這種用法，很麻煩，節點的動態刪除和修改都很麻煩，我一開始就使用了這個，後來發現動態添加節點、刪除節點、節點過濾通通都很麻煩，而後換個思路，使用data，全部問題一下就都解決了。使用data思路以下：在tree中使用data屬性加載數據，後期全部涉及到節點動態添加刪除的事，咱們通通只去操做data就能夠了，這也符合數據驅動視圖的思想。

1.在頁面加載時，我在mounted方法中就去獲取了全部的部門數據，而後直接加載到樹上（這種方式比較省事，特別是處理後面動態添加刪除時很方便，小夥伴在工做中能夠根據實際狀況選取合適的策略）。核心代碼以下：

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

2.添加節點時，當服務端添加成功後，會返回剛剛添加的節點的json，經過遞歸找到這一段json所在的位置，動態假如到樹中。遞歸過程以下:

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);
    }
}
}

這是經過遞歸找到添加的位置，動態添加。

3.刪除節點時，當服務端返回刪除成功時，同樣找到刪除節點的位置，動態從樹中刪除。核心代碼以下:

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);
    }
}
}

這也是在刪除成功後，經過遞歸找到刪除的位置，動態刪除數據。

4.因爲我採用了一次性加載全部部門的策略，因此節點過濾這塊特別容易，基本上徹底參考官方案例就能實現。

其餘一些瑣碎的技術就不值得介紹了，你們在源碼中自行研究，有問題歡迎留言討論。

關注公衆號，能夠及時接收到最新文章: