如何处理el-tree 搜索卡顿问题

---

前言

最近在做el-tree的搜索功能，根据element UI 提供的fliter方法可以完成，可是当数据量过大时就会卡顿，最终发现条件判断和延时和v-if 结合效果不错

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、具体操作

1.template部分

代码如下（示例）：

    <el-form-item style="margin-bottom:7px">
            <el-input
              v-model="filterText" //搜索栏绑定的值，会在watch中监听
              clearable
              maxlength='50'
              placeholder="请输入内容">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-form-item>
  <el-form-item
            v-loading="filterLoading" // 可以搜索的时候出现等待的效果
            :style="{'height':tableHeight-260 -30 +'px','border':'solid 1px rgb(242, 242, 242)','overflow':'auto'}"
            element-loading-spinner="el-icon-loading"
            element-loading-text="加载数据中"
          >
            <el-tree
              v-if='treeShow' // 当输入框输入内容的时候该部分不渲染，减少不断查询的次数
              ref="tree"
              :data="treeData"
              :default-expanded-keys="treeExpandData"
              :filter-node-method="filterNode" //element 提供的方法
              :props="treeDefaultProps"
              accordion
              check-on-click-node
              check-strictly
              highlight-current
              node-key="id"
              show-checkbox
              @check="checkGroupNode"
            ></el-tree>
          </el-form-item>

2.watch

这里我做了一个搜素内容是否是中文的判断，根据自己的实际情况做增减

//声明的一个延时器，在watch中调用
const debounce = (function () {
  let timer = 0
  return function (func, delay) {
    clearTimeout(timer)
    timer = setTimeout(func, delay)
  }
})()

/*-----------------*/
 watch: {
    filterText(val) {
      if (/.*[\u4e00-\u9fa5]+.*$/.test(val)) { //判断是否是中文
        this.treeShow = false
        this.filterLoading = true
        debounce(() => { //延时器
          this.$refs.tree.filter(val.trim()) //el-tree 自身的筛查方法
          this.filterLoading = false
        }, 100);
        this.treeShow = true
      } else {
        return
      }
    }
  },

2.methods

   filterNode(value, data, node) { 
      if (!value) return true
      let parentNode = node.parent,
        labels = [node.label],
        level = 1
      while (level < node.level) {
        labels = [...labels, parentNode.label]
        parentNode = parentNode.parent
        level++
      }
      return labels.some(label=> label.indexOf(value) !== -1)
    },

---

总结

希望对你有帮助，新手一枚，欢迎指正，希望给已经秃头的我一个赞👍，鼓励底层的搬砖人