解決el-tree節(jié)點(diǎn)過(guò)濾不顯示下級(jí)的問(wèn)題
顯示下級(jí)的方法
elementui的節(jié)點(diǎn)過(guò)濾默認(rèn)是不顯示下級(jí)的
代碼在 :filter-node-method="filterNode" 中添加
let parentNode = node.parent // 父級(jí)node
let labels = [node.label] // 當(dāng)前node的名字
let level = 1 // 層級(jí)
while (level < node.level) {
labels = [...labels, parentNode.label] // 當(dāng)前node名字,父級(jí)node的名字
parentNode = parentNode.parent
level++
}
return labels.some(d => d.indexOf(value) !== -1)這樣就可以完美解決了子節(jié)點(diǎn)可以展開(kāi)的問(wèn)題:

我們需求方覺(jué)得還可以再優(yōu)化
當(dāng)搜索 “春天” 的時(shí)候,父子級(jí)都能匹配到,這個(gè)時(shí)候子級(jí)的支線節(jié)點(diǎn) “桃子” 也會(huì)顯示出來(lái):

當(dāng)搜索 “苦” 的時(shí)候,父子級(jí)都能匹配到,這個(gè)時(shí)候子級(jí)的其它無(wú)關(guān)苦的節(jié)點(diǎn)需要隱藏

代碼仍然在el-tree官方原生的 :filter-node-method="filterNode" 方法里面加
思路
- 一、(當(dāng)前是支線節(jié)點(diǎn),也就是說(shuō)兄弟有匹配到的)并且 (支線節(jié)點(diǎn)所有下級(jí)都匹配不到關(guān)鍵字)的情況
- 二、隱藏支線節(jié)點(diǎn),包括所有下級(jí)的子節(jié)點(diǎn)才行,光隱藏支線節(jié)點(diǎn)沒(méi)有用
nodesParentId:[] 方法外的變量默認(rèn)空數(shù)組
if (node.level > 1) {
// 把我和兄弟name整合到數(shù)組中
const info = findTreeIdObjFn(this.dataTree, 'id', data.parentId).children.map(d => d.name)
// 判斷兄弟有沒(méi)有
if (info.some(d => d.indexOf(value) !== -1)) {
// 兄弟能匹配到,自己沒(méi)有匹配到
if (data.name.indexOf(value) === -1) {
// 所有下級(jí)的 name 集合
const names = findCurNodeDescendantsFn(this.dataTree, 'id', data.id).map(
d => findTreeIdObjFn(this.dataTree, 'id', d).name
)
// 判斷都沒(méi)匹配到的情況
if (!names.some(d => d.indexOf(value) !== -1)) {
// 把我和我下級(jí)所有id push到變量中,將當(dāng)前支線節(jié)點(diǎn)隱藏
this.nodesParentId.push(...findCurNodeDescendantsFn(this.dataTree, 'id', data.id))
return false
}
}
}
}
// 如果當(dāng)前節(jié)點(diǎn)在支線節(jié)點(diǎn)名單中,則隱藏當(dāng)前節(jié)點(diǎn)
if (this.nodesParentId.indexOf(data.id) !== -1) {
return false
}全部代碼:
filterNode(value, data, node) {
// 校驗(yàn)沒(méi)有數(shù)據(jù)情況
if (!value) {
this.nodesParentId = []
this.$nextTick(() => {
node.expanded = false
})
return true
}
// 控制展開(kāi)和收起
this.$nextTick(() => {
node.expanded = false
})
// 當(dāng)前名字是否包含在上級(jí)父親里
if (data.name.indexOf(value) !== -1) {
this.$nextTick(() => {
this.openSuperior(node)
// 如果是第一級(jí),直接打開(kāi)當(dāng)前級(jí)
if (!data.parentId) {
node.expanded = true
}
})
}
// 隱藏所有支線節(jié)點(diǎn)下面的所有子節(jié)點(diǎn)
// 思路:
// (當(dāng)前是支線節(jié)點(diǎn),兄弟有匹配到的情況)并且 (支線節(jié)點(diǎn)所有下級(jí)都匹配不到)的情況
// 隱藏支線節(jié)點(diǎn),包括所有下級(jí)的子節(jié)點(diǎn)才行,光隱藏支線節(jié)點(diǎn)沒(méi)有用
if (node.level > 1) {
// 把我和兄弟name整合到數(shù)組中
const info = findTreeIdObjFn(this.dataTree, 'id', data.parentId).children.map(d => d.name)
// 判斷兄弟有沒(méi)有
if (info.some(d => d.indexOf(value) !== -1)) {
// 兄弟能匹配到,自己沒(méi)有匹配到
if (data.name.indexOf(value) === -1) {
// 下級(jí)的 name 集合
const names = findCurNodeDescendantsFn(this.dataTree, 'id', data.id).map(
d => findTreeIdObjFn(this.dataTree, 'id', d).name
)
// 判斷都沒(méi)匹配到的情況
if (!names.some(d => d.indexOf(value) !== -1)) {
// 把我和我下級(jí)所有id push到變量中,將當(dāng)前支線節(jié)點(diǎn)隱藏
this.nodesParentId.push(...findCurNodeDescendantsFn(this.dataTree, 'id', data.id))
return false
}
}
}
}
// 當(dāng)前節(jié)點(diǎn)在支線節(jié)點(diǎn)名單中,則隱藏當(dāng)前節(jié)點(diǎn)
if (this.nodesParentId.indexOf(data.id) !== -1) {
return false
}
// 子級(jí)可被篩選到
let parentNode = node.parent // 父級(jí)node
let labels = [node.label] // 當(dāng)前node的名字
let level = 1 // 層級(jí)
while (level < node.level) {
labels = [...labels, parentNode.label] // 當(dāng)前node名字,父級(jí)node的名字
parentNode = parentNode.parent
level++
}
return labels.some(d => d.indexOf(value) !== -1)
// 總結(jié):之前沒(méi)解決的是因?yàn)?只隱藏支線父節(jié)點(diǎn)是隱藏不掉的,隱藏父節(jié)點(diǎn)包括下面的所有子節(jié)點(diǎn)才能隱藏
}openSuperior 方法
// 展開(kāi)所有父級(jí)
openSuperior(node) {
if (node.parent) {
node.parent.expanded = true
this.openSuperior(node.parent)
}
},findTreeIdObjFn方法:
// 傳入id(key)返回當(dāng)前所在對(duì)象
/**
* @param {*} data 樹(shù)形結(jié)構(gòu)全部數(shù)據(jù)
* @param {*} key 查找的key
* @param {*} value 傳入的key對(duì)應(yīng)的value
* @returns
*/
export const findTreeIdObjFn = (data, key, value) => {
let temp = null
;(function fn(data, value) {
data.forEach(item => {
if (item[key] === value) {
temp = item
}
if (item.children && item.children.length > 0) {
fn(item.children, value)
}
})
})(data, value)
return temp
}findCurNodeDescendantsFn方法:
// 找到傳入tree數(shù)據(jù)當(dāng)前節(jié)點(diǎn)的id及所有子孫的id(key)集合
/**
* @param {*} data tree數(shù)據(jù)
* @param {*} key 要查找的key
* @param {*} value key對(duì)應(yīng)的value
* @returns
*/
export const findCurNodeDescendantsFn = (data, key, value) => {
const obj = findTreeIdObjFn(data, key, value)
const ids = []
;(function selfRunFn(obj) {
ids.push(obj[key])
if (obj.children && obj.children.length > 0) {
obj.children.forEach(x => {
selfRunFn(x)
})
}
})(obj)
return ids
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
在Vue中使用動(dòng)態(tài)import()語(yǔ)法動(dòng)態(tài)加載組件
在Vue中,你可以使用動(dòng)態(tài)import()語(yǔ)法來(lái)動(dòng)態(tài)加載組件,動(dòng)態(tài)導(dǎo)入允許你在需要時(shí)異步加載組件,這樣可以提高應(yīng)用程序的初始加載性能,本文給大家介紹在Vue中使用動(dòng)態(tài)import()語(yǔ)法動(dòng)態(tài)加載組件,感興趣的朋友一起看看吧2023-11-11
Vue中 axios delete請(qǐng)求參數(shù)操作
這篇文章主要介紹了Vue中 axios delete請(qǐng)求參數(shù)操作,具有很好的參考價(jià)值,希望對(duì)大家有所 幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue 驗(yàn)證碼界面實(shí)現(xiàn)點(diǎn)擊后標(biāo)灰并設(shè)置div按鈕不可點(diǎn)擊狀態(tài)
今天小編就為大家分享一篇vue 驗(yàn)證碼界面實(shí)現(xiàn)點(diǎn)擊后標(biāo)灰并設(shè)置div按鈕不可點(diǎn)擊狀態(tài),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue 輸入框輸入任意內(nèi)容返回?cái)?shù)字的實(shí)現(xiàn)
本文主要介紹了vue 輸入框輸入任意內(nèi)容返回?cái)?shù)字的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
發(fā)布訂閱模式在vue中的實(shí)際運(yùn)用實(shí)例詳解
訂閱發(fā)布模式定義了一種一對(duì)多的依賴關(guān)系,讓多個(gè)訂閱者對(duì)象同時(shí)監(jiān)聽(tīng)某一個(gè)主題對(duì)象。這篇文章主要介紹了發(fā)布訂閱模式在vue中的實(shí)際運(yùn)用,需要的朋友可以參考下2019-06-06
VUE項(xiàng)目中調(diào)用高德地圖的全流程講解
這篇文章主要介紹了VUE項(xiàng)目中調(diào)用高德地圖的全流程講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
解決ant Design Search無(wú)法輸入內(nèi)容的問(wèn)題
這篇文章主要介紹了解決ant Design Search無(wú)法輸入內(nèi)容的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10

