解決elementUI中el-tree樹形結(jié)構(gòu)中節(jié)點(diǎn)過濾的問題
elementUI中el-tree樹形結(jié)構(gòu)中節(jié)點(diǎn)過濾
業(yè)務(wù)需求
vue項(xiàng)目，權(quán)限管理模塊中經(jīng)常遇到樹形結(jié)構(gòu)的處理，這篇文章我們講一下樹形結(jié)構(gòu)的節(jié)點(diǎn)過濾問題。在權(quán)限管理中的菜單管理模塊，當(dāng)我們新增菜單是需要選擇它的父級(jí)菜單或者目錄（有這樣一個(gè)需求，就是菜單下面是可以新增按鈕的，所以新增按鈕就需要選擇它的父級(jí)菜單，菜單的父級(jí)當(dāng)然只是目錄），那么這里選擇上級(jí)菜單或者目錄時(shí)就需要對(duì)樹形結(jié)構(gòu)進(jìn)行過濾。
需求分析
處理el-tree的樹形結(jié)構(gòu)過濾問題我們首先會(huì)想到遍歷遞歸去給要過濾的節(jié)點(diǎn)的值置空，這樣它既然是空置那么就不會(huì)被el-tree樹形渲染，經(jīng)過踩坑這里的答案是不行的，它雖然為空，但還是會(huì)占位顯示為空。
這里我使用的是el-tree控件的filter-node-method 方法進(jìn)行過濾。
解決方案
第一步是既然要過濾的節(jié)點(diǎn)置空不行，那么我們就給他設(shè)置一個(gè)特殊的過濾值，我用的是'undefined'，所以在遞歸遍歷的時(shí)候就給要過濾的節(jié)點(diǎn)的值設(shè)置為'undefined'，然后再對(duì)樹形數(shù)據(jù)進(jìn)行過濾：
? ? ? ? ?// 樹形數(shù)據(jù)過濾
? ? ??? ? this.$nextTick(() => {
? ? ? ? ? ? this.$refs.menutree.filter('undefined')
? ? ? ? ? })第二步，當(dāng)已經(jīng)執(zhí)行樹形數(shù)據(jù)過濾之后，然后在樹形組件上綁定:filter-node-method="filterNode"方法對(duì)樹形結(jié)構(gòu)的節(jié)點(diǎn)進(jìn)行過濾：
? ? ? // 樹形節(jié)點(diǎn)過濾
? ? ? filterNode(value, data, node) {
? ? ? ? // if (!value) return true;
? ? ? ? // 當(dāng)節(jié)點(diǎn)的data.resourcesName里面有值時(shí)展示它，否則過濾它
? ? ? ? if (data.resourcesName.includes(value)) {
? ? ? ? ? return false
? ? ? ? } else {
? ? ? ? ? return true
? ? ? ? }
? ? ? },el-tree樹形踩坑
需求：el-tree節(jié)點(diǎn)需要傳選中的父級(jí)菜單給后臺(tái)，而不是僅僅子節(jié)點(diǎn)。
比如說下方需要將系統(tǒng)管理的節(jié)點(diǎn)id也傳過給后臺(tái)。
處理方法
實(shí)現(xiàn)：簡單，通過getCheckedNodes()即可，但是需要定義后面的參數(shù)半選節(jié)點(diǎn)為true
遍歷拿到id
let chooseArr = this.$refs.meauTree.getCheckedNodes(false,true);
let idList = []
chooseArr.forEach(item=>{
idList.push(item.id);
})普通需求應(yīng)該getCheckedKeys即可滿足。
let chooseArr = this.$refs.meauTree.getCheckedKeys();
回顯菜單
問題來了，回顯菜單的時(shí)候，后臺(tái)返回的是包含父節(jié)點(diǎn)的id,于是需要過濾處理。
方法：
遍歷el-tree數(shù)據(jù)，看是否有子節(jié)點(diǎn)，沒有子節(jié)點(diǎn)則存下id
resolveAllEunuchNodeId(json, idArr, temp) {
for (let i = 0; i < json.length; i++) {
const item = json[i]
// 存在子節(jié)點(diǎn)，遞歸遍歷;不存在子節(jié)點(diǎn)，將json的id添加到臨時(shí)數(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樹形結(jié)構(gòu)數(shù)據(jù)menuIds后臺(tái)拿到的包含所有半選的節(jié)點(diǎn)id數(shù)組
// 解析出所有的太監(jiān)節(jié)點(diǎn) this.menuIdList = this.resolveAllEunuchNodeId(this.menuData, menuIds, [])
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解mpvue開發(fā)小程序小總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
關(guān)于Element-ui中table默認(rèn)選中toggleRowSelection問題
這篇文章主要介紹了關(guān)于Element-ui中table默認(rèn)選中toggleRowSelection問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue el-autocomplete遠(yuǎn)程搜索下拉框并實(shí)現(xiàn)自動(dòng)填充功能(推薦)
在elementui Input輸入框中可以找到遠(yuǎn)程搜索組件，獲取服務(wù)端的數(shù)據(jù)。這篇文章主要給大家介紹Vue el-autocomplete遠(yuǎn)程搜索下拉框并實(shí)現(xiàn)自動(dòng)填充功能，感興趣的朋友一起看看吧2019-10-10
vue滾動(dòng)條滾動(dòng)到頂部或者底部的方法
這篇文章主要給大家介紹了關(guān)于vue滾動(dòng)條滾動(dòng)到頂部或者底部的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
如何使用Vue3.2+Vite2.7從0快速打造一個(gè)UI組件庫
構(gòu)建工具使用vue3推薦的vite,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3.2+Vite2.7從0快速打造一個(gè)UI組件庫的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Swiper是一個(gè)很常用的用于實(shí)現(xiàn)各種滑動(dòng)效果的插件，PC端和移動(dòng)端都能很好的適配。本文將利用Swiper實(shí)現(xiàn)封裝輪播圖組件，感興趣的可以了解一下2022-09-09
vue實(shí)現(xiàn)富文本編輯器詳細(xì)過程
Vue富文本的實(shí)現(xiàn)可以使用一些現(xiàn)成的第三方庫,如Quill、Vue-quill-editor、wangEditor等,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)富文本編輯器的相關(guān)資料,需要的朋友可以參考下2024-01-01
el-table表格動(dòng)態(tài)合并行及合并行列實(shí)例詳解
在使用el-table的時(shí)候經(jīng)常會(huì)涉及到表格的列合并，包括表格操作列的合并,下面這篇文章主要給大家介紹了關(guān)于el-table表格動(dòng)態(tài)合并行及合并行列的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
Vue-cli3中如何引入ECharts并實(shí)現(xiàn)自適應(yīng)
這篇文章主要介紹了Vue-cli3中如何引入ECharts并實(shí)現(xiàn)自適應(yīng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
如何使用el-table實(shí)現(xiàn)純前端導(dǎo)出(適用于el-table任意表格)
我們?nèi)粘Ｗ鲰?xiàng)目,特別是后臺(tái)管理系統(tǒng),常常需要導(dǎo)出excel文件,這篇文章主要給大家介紹了關(guān)于如何使用el-table實(shí)現(xiàn)純前端導(dǎo)出的相關(guān)資料,本文適用于el-table任意表格,需要的朋友可以參考下2024-03-03