el-tree 组件 只搜索到第二级时默认展示第二级所有选项

// 现在el-tree组件,默认搜索所有级,如果只搜索到第二级就只显示第二级,但是想选择第三级的内容就选不到,很不友好,现在对此改造

// 改造完逻辑:

如果只搜到了第二级 则第二级折叠 然后可以展开查看第三级

如果只搜到了第三级 那就默认展开到第三级 只展示当前搜到的第三级

如果搜到了第二级和第三级 那就默认展开到第三级 展示第二级所有项

javascript 复制代码
// el-tree
<el-input v-model="filterText" clearable placeholder="输入关键字进行过滤"></el-input>
<el-tree :ref="'paramsTreeRef' + inxKey" :data="selParamsTreeData" :filter-node-method="filterNode" :default-expanded-keys="expandedKeys" :highlight-current="true" :props="defaultProps" class="filter-tree" node-key="code" @node-click="selParamsTreeClick"></el-tree>

// watch 监听搜索
watch: {
    filterText(val) {
      if (val != '') {
        this.expands = {};
        this.$refs[this.paramsTreeRef].filter(val);
        this.$nextTick(() => {
          this.changeTreeNodeStatus(this.$refs[this.paramsTreeRef].store.root);
          this.expandedKeys = Object.keys(this.expands);
        });
      }
    },
  },
// 改变节点的状态
    changeTreeNodeStatus(node) {
      if (node.level === 2) {
        node.expanded = false;
      }
      for (let i = 0; i < node.childNodes.length; i++) {
        // 改变节点的自身expanded状态
        if (node.level === 2) {
          node.childNodes[i].expanded = false;
        }
        if (node.childNodes[i].childNodes.length > 0) {
          this.changeTreeNodeStatus(node.childNodes[i]);
        }
      }
    },
    filterNode(value, data, node) {
      if (!value) return true;
      // return data.name.indexOf(value) !== -1;
      return this.chooseNode(value, data, node);
    },
    // 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配,则返回该节点以及其下的所有子节点;如果参数是子节点,则返回该节点的父节点。name是中文字符,enName是英文字符.
    chooseNode(value, data, node) {
      if (data.name.toLowerCase().indexOf(value.toLowerCase()) !== -1) {
        if (node.level === 3) {
          this.expands[node.data.code] = 1;
        }
        return true
      }
      const level = node.level
      // 如果传入的节点本身就是一级节点就不用校验了
      if (level === 1) {
        return false
      }
      // 先取当前节点的父节点
      let parentData = node.parent
      // 遍历当前节点的父节点
      let index = 0
      while (index < level - 1) {
        // 如果匹配到直接返回,此处name值是中文字符,enName是英文字符。判断匹配中英文过滤
        if (parentData.data.name.toLowerCase().indexOf(value.toLowerCase()) !== -1) {
          return true
        }
        // 否则的话再往上一层做匹配
        parentData = parentData.parent
        index++
      }
      // 没匹配到返回false
      return false
    },
相关推荐
angerdream15 小时前
Android手把手编写儿童手机远程监控App之WebRtc切换摄像头与桌面共享
vue.js
kisshyshy15 小时前
# 🔥 数组去重:从双重循环到 Set,面试官想听什么?
javascript·面试
RD_daoyi15 小时前
Google 网站收录全流程解析:抓取、索引与排名机制详解
前端·javascript·人工智能·学习·搜索引擎·html
@大迁世界15 小时前
AI还替不了的JS能力
开发语言·前端·javascript·人工智能·ecmascript
暗冰ཏོ15 小时前
2026前端开发资源整理大全:从基础学习到工程化实战的完整导航
前端·javascript·css·前端框架·html
喵个咪16 小时前
吃透后台权限系统:从架构设计到 Vue3/React 双框架完整落地
前端·vue.js·react.js
hdsoft_huge16 小时前
全开源数字孪生系统搭建方案:全套技术文档
vue.js·开源·node.js·echarts·webstorm
学且思16 小时前
Vue3 Patch 算法深度解析:从原理到源码实现
前端·vue.js
卤蛋fg616 小时前
vxe-table 导出 XLSX 文件:自动展开分组并导出图片
vue.js
HackTwoHub17 小时前
AI赋能Chrome MCP × JS逆向Skill自动化JS逆向挖洞
javascript·人工智能·chrome·安全·web安全·网络安全·自动化