欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決el-tree節(jié)點(diǎn)過濾不顯示下級(jí)的問題

 更新時(shí)間:2023年04月23日 14:22:28   作者:桃子Jerry  
這篇文章主要介紹了解決el-tree節(jié)點(diǎn)過濾不顯示下級(jí)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

顯示下級(jí)的方法

elementui的節(jié)點(diǎn)過濾默認(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)可以展開的問題:

我們需求方覺得還可以再優(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),也就是說兄弟有匹配到的)并且 (支線節(jié)點(diǎn)所有下級(jí)都匹配不到關(guān)鍵字)的情況
  • 二、隱藏支線節(jié)點(diǎn),包括所有下級(jí)的子節(jié)點(diǎn)才行,光隱藏支線節(jié)點(diǎn)沒有用

nodesParentId:[] 方法外的變量默認(rèn)空數(shù)組

      if (node.level > 1) {
        // 把我和兄弟name整合到數(shù)組中
        const info = findTreeIdObjFn(this.dataTree, 'id', data.parentId).children.map(d => d.name)
        //  判斷兄弟有沒有
        if (info.some(d => d.indexOf(value) !== -1)) {
          // 兄弟能匹配到,自己沒有匹配到
          if (data.name.indexOf(value) === -1) {
            // 所有下級(jí)的 name 集合
            const names = findCurNodeDescendantsFn(this.dataTree, 'id', data.id).map(
              d => findTreeIdObjFn(this.dataTree, 'id', d).name
            )
            // 判斷都沒匹配到的情況
            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)沒有數(shù)據(jù)情況
      if (!value) {
        this.nodesParentId = []
        this.$nextTick(() => {
          node.expanded = false
        })
        return true
      }
 
      // 控制展開和收起
      this.$nextTick(() => {
        node.expanded = false
      })
      // 當(dāng)前名字是否包含在上級(jí)父親里
      if (data.name.indexOf(value) !== -1) {
        this.$nextTick(() => {
          this.openSuperior(node)
          // 如果是第一級(jí),直接打開當(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)沒有用
      if (node.level > 1) {
        // 把我和兄弟name整合到數(shù)組中
        const info = findTreeIdObjFn(this.dataTree, 'id', data.parentId).children.map(d => d.name)
        //  判斷兄弟有沒有
        if (info.some(d => d.indexOf(value) !== -1)) {
          // 兄弟能匹配到,自己沒有匹配到
          if (data.name.indexOf(value) === -1) {
            // 下級(jí)的 name 集合
            const names = findCurNodeDescendantsFn(this.dataTree, 'id', data.id).map(
              d => findTreeIdObjFn(this.dataTree, 'id', d).name
            )
            // 判斷都沒匹配到的情況
            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é):之前沒解決的是因?yàn)?只隱藏支線父節(jié)點(diǎn)是隱藏不掉的,隱藏父節(jié)點(diǎn)包括下面的所有子節(jié)點(diǎn)才能隱藏
    }

openSuperior 方法

 
    // 展開所有父級(jí)
    openSuperior(node) {
      if (node.parent) {
        node.parent.expanded = true
        this.openSuperior(node.parent)
      }
    },

findTreeIdObjFn方法:

// 傳入id(key)返回當(dāng)前所在對(duì)象
/**
 * @param {*} data  樹形結(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)文章

最新評(píng)論