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
    },
相关推荐
你别说话了3 小时前
Vue项目解决跨域
前端·javascript·vue.js
指尖时光.3 小时前
Three.js 超全入门综合案例
开发语言·javascript·ecmascript
唐青枫4 小时前
http-server:别再双击 index.html,一条命令把目录变成网站
前端·javascript
学习星球6 小时前
Solid.js 实战:拆解官方 RealWorld 项目
开发语言·javascript·vue.js
YuJie8 小时前
JSBridge 基础知识
前端·javascript
默_笙8 小时前
🍕 后端接口还没写好,前端已经跑起来了?Mock 数据 + axios 接口层,前后端再也不互相"等"
前端·javascript
爱勇宝8 小时前
客户只想看个页面,我却做了一个静态演示发布系统
前端·javascript·后端
界面开发小八哥12 小时前
界面控件DevExpress Blazor v26.1新版亮点 - Navigation(导航)
javascript·.net·界面控件·blazor·devexpress·ui开发
aXin_ya12 小时前
ElementUI (01):Vue2 项目引入 ElementUI使用
elementui·vue
SendTomo13 小时前
send.wang(私传网)基于网页P2P直连传输大文件的优势
javascript·网络·webrtc·html5·p2p