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
    },
相关推荐
weedsfly21 分钟前
异步编程全景与事件循环——彻底搞懂 JS 执行机制
前端·javascript
用户17335980753722 分钟前
纯前端 PDF 数字签名实战:Vue 3 + pdf-lib 在浏览器里完成签名嵌入
前端·javascript
JieE21211 小时前
LeetCode 226. 翻转二叉树|JS 递归超详细拆解,二叉树入门经典题
javascript·算法
JieE21211 小时前
LeetCode 104. 二叉树的最大深度|递归思路超详细拆解
javascript·算法
kyriewen15 小时前
我用 AI 一周写完了整个项目,上线第一天就崩了——这是我踩过最贵的 5 个坑
前端·javascript·ai编程
Larcher16 小时前
AI Loop:让AI像人一样自主完成任务的核心机制
javascript·人工智能·设计模式
默_笙16 小时前
🃏 JS 只有 8 种数据类型,但我花了 2 天才搞懂 null 和 undefined 的区别
javascript
jump_jump16 小时前
流式 HTML:从 htmx 片段装配到浏览器原生增量渲染
javascript·性能优化·前端工程化
swipe18 小时前
正则表达式入门到进阶:从表单校验到手写模板引擎
前端·javascript·面试
kyriewen18 小时前
前端错误监控最全指南:捕获 JS 异常、Promise 拒绝、资源加载失败,附上报代码
前端·javascript·监控