解決elementUI中el-tree樹形結構中節(jié)點過濾的問題
elementUI中el-tree樹形結構中節(jié)點過濾
業(yè)務需求
vue項目，權限管理模塊中經(jīng)常遇到樹形結構的處理，這篇文章我們講一下樹形結構的節(jié)點過濾問題。在權限管理中的菜單管理模塊，當我們新增菜單是需要選擇它的父級菜單或者目錄（有這樣一個需求，就是菜單下面是可以新增按鈕的，所以新增按鈕就需要選擇它的父級菜單，菜單的父級當然只是目錄），那么這里選擇上級菜單或者目錄時就需要對樹形結構進行過濾。
需求分析
處理el-tree的樹形結構過濾問題我們首先會想到遍歷遞歸去給要過濾的節(jié)點的值置空，這樣它既然是空置那么就不會被el-tree樹形渲染，經(jīng)過踩坑這里的答案是不行的，它雖然為空，但還是會占位顯示為空。
這里我使用的是el-tree控件的filter-node-method 方法進行過濾。
解決方案
第一步是既然要過濾的節(jié)點置空不行，那么我們就給他設置一個特殊的過濾值，我用的是'undefined'，所以在遞歸遍歷的時候就給要過濾的節(jié)點的值設置為'undefined'，然后再對樹形數(shù)據(jù)進行過濾：
? ? ? ? ?// 樹形數(shù)據(jù)過濾
? ? ??? ? this.$nextTick(() => {
? ? ? ? ? ? this.$refs.menutree.filter('undefined')
? ? ? ? ? })第二步，當已經(jīng)執(zhí)行樹形數(shù)據(jù)過濾之后，然后在樹形組件上綁定:filter-node-method="filterNode"方法對樹形結構的節(jié)點進行過濾：
? ? ? // 樹形節(jié)點過濾
? ? ? filterNode(value, data, node) {
? ? ? ? // if (!value) return true;
? ? ? ? // 當節(jié)點的data.resourcesName里面有值時展示它，否則過濾它
? ? ? ? if (data.resourcesName.includes(value)) {
? ? ? ? ? return false
? ? ? ? } else {
? ? ? ? ? return true
? ? ? ? }
? ? ? },el-tree樹形踩坑
需求：el-tree節(jié)點需要傳選中的父級菜單給后臺，而不是僅僅子節(jié)點。
比如說下方需要將系統(tǒng)管理的節(jié)點id也傳過給后臺。
處理方法
實現(xiàn)：簡單，通過getCheckedNodes()即可，但是需要定義后面的參數(shù)半選節(jié)點為true
遍歷拿到id
let chooseArr = this.$refs.meauTree.getCheckedNodes(false,true);
let idList = []
chooseArr.forEach(item=>{
idList.push(item.id);
})普通需求應該getCheckedKeys即可滿足。
let chooseArr = this.$refs.meauTree.getCheckedKeys();
回顯菜單
問題來了，回顯菜單的時候，后臺返回的是包含父節(jié)點的id,于是需要過濾處理。
方法：
遍歷el-tree數(shù)據(jù)，看是否有子節(jié)點，沒有子節(jié)點則存下id
resolveAllEunuchNodeId(json, idArr, temp) {
for (let i = 0; i < json.length; i++) {
const item = json[i]
// 存在子節(jié)點，遞歸遍歷;不存在子節(jié)點，將json的id添加到臨時數(shù)組中
if (item.children && item.children.length !== 0) {
this.resolveAllEunuchNodeId(item.children, idArr, temp)
} else {
temp.push(idArr.filter(id => id === item.id))
}
}
return temp
}
使用：
menuData樹形結構數(shù)據(jù)menuIds后臺拿到的包含所有半選的節(jié)點id數(shù)組
// 解析出所有的太監(jiān)節(jié)點 this.menuIdList = this.resolveAllEunuchNodeId(this.menuData, menuIds, [])
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
VUE?html5-qrcode實現(xiàn)H5掃一掃功能實例
這篇文章主要給大家介紹了關于VUE?html5-qrcode實現(xiàn)H5掃一掃功能的相關資料,html5-qrcode是輕量級和跨平臺的QR碼和條形碼掃碼的JS庫,集成二維碼、條形碼和其他一些類型的代碼掃描功能,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了Element Tooltip 文字提示的使用示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了Vue?組件上的v-model雙向綁定原理,從本文的學習可以知道組件上v-model指令的本質(zhì)也是生成了value屬性和input事件，具體實例代碼跟隨小編一起看看吧2022-05-05
這篇文章主要為大家詳細介紹了如何使用Vue3實現(xiàn)列表無限滾動的效果，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2023-07-07
vue mintui-Loadmore結合實現(xiàn)下拉刷新和上拉加載示例
本篇文章主要介紹了vue mintui-Loadmore結合實現(xiàn)下拉刷新和上拉加載示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了vue左側菜單,樹形圖遞歸實現(xiàn)代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vuecli3.x中輕松4步帶你使用tinymce的步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
express+vue+mongodb+session 實現(xiàn)注冊登錄功能
這篇文章主要介紹了express+vue+mongodb+session 實現(xiàn)注冊登錄,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
在vue3.x中vuex調(diào)取值在html代碼里可以直接使用vue2.x的方法,但是在js里與vue2.x就有了那么一丟丟的不同,下面這篇文章主要給大家介紹了關于Vue3中Vuex詳細使用的相關資料,需要的朋友可以參考下2022-07-07
這篇文章主要給大家介紹了關于Vue如何實現(xiàn)分頁功能的相關資料,Vue分頁功能的實現(xiàn)需要前端和后端共同配合完成,文中通過代碼實例介紹的非常詳細,需要的朋友可以參考下2023-09-09