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 分钟前
uniapp微信小程序-长按按钮百度语音识别回显文字
前端·javascript·vue.js·百度·微信小程序·uni-app·语音识别
程序员拂雨1 小时前
Angular 知识框架
前端·javascript·angular.js
GoodStudyAndDayDayUp1 小时前
gitlab+portainer 实现Ruoyi Vue前端CI/CD
前端·vue.js·gitlab
前端 贾公子2 小时前
uniapp -- 验证码倒计时按钮组件
前端·vue.js·uni-app
zhengddzz2 小时前
从卡顿到丝滑:JavaScript性能优化实战秘籍
开发语言·javascript·性能优化
Go_going_2 小时前
ajax,Promise 和 fetch
javascript·ajax·okhttp
LuckyLay2 小时前
Vue百日学习计划Day4-8——Gemini版
前端·vue.js·学习
Jelian_2 小时前
element-ui的el-cascader增加全选按钮实现(附源码)
vue.js·ui·elementui
EndingCoder3 小时前
实现可靠的 WebSocket 连接:心跳与自动重连的最佳实践
javascript
flying robot4 小时前
js在浏览器执行原理
开发语言·javascript·ecmascript