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
    },
相关推荐
炫饭第一名8 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
Forever7_9 小时前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
不会敲代码19 小时前
前端组件化样式隔离实战:React CSS Modules、styled-components 与 Vue scoped 对比
css·vue.js·react.js
Angelial9 小时前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js
进击的尘埃10 小时前
Vue3 响应式原理:从 Proxy 到依赖收集,手撸一个迷你 reactivity
javascript
willow10 小时前
JavaScript数据类型整理1
javascript
LeeYaMaster10 小时前
20个例子掌握RxJS——第十一章实现 WebSocket 消息节流
javascript·angular.js
UIUV11 小时前
RAG技术学习笔记(含实操解析)
javascript·langchain·llm
SuperEugene11 小时前
Vue状态管理扫盲篇:如何设计一个合理的全局状态树 | 用户、权限、字典、布局配置
前端·vue.js·面试
阿懂在掘金11 小时前
defineModel 是进步还是边界陷阱?双数据源组件的选择逻辑
vue.js·源码阅读