Vue el-tree延时过滤

最新推荐文章于 2025-10-29 09:46:17 发布

原创最新推荐文章于 2025-10-29 09:46:17 发布 · 2.1k 阅读

CC 4.0 BY-SA版权

项目中将SQL服务器、数据库、表结构呈现在el-tree内作描述维护。使用el-tree过滤功能时，input输入字符会立即过滤，导致卡顿。如过滤“Test”，每输入一个字符就过滤一次。为此，在watch内增加延时功能，输入字符后1秒再过滤，减少过滤次数。

最近做了一个项目，把SQL服务器，数据库，表的结构呈现在el-tree内，以便作数据表和字段的描述维护。
这里写图片描述

el-tree获取数据库数据，前端呈现分层后，如何快速的找出一个节点，根据饿了么官方文档，el-tree有一个过滤的功能。 :filter-node-method=”filterNode”。但是此功能在input输入框每次输入一个字符就会立即过滤整个树形结构，导致需要过滤的字符还没有输入完毕，el-tree已经过滤了很多遍，造成卡顿的现象。
比如要在树形结构中过滤包含字符为“Test”的节点，输入T后el-tree就会立即过滤包含T的数据，输入e后第二次过滤包含Te的数据，输入Tes后第三次过滤包含Tes的数据，输入完Test后是第四次过滤。
为此，需要在input输入过滤的同时，在watch内增加延时功能。

<div class="treeheight" style="float:left;overflow:auto;width:30%;border:1px solid">
          <el-input :placeholder="this.$t('SQLTreemanage.filterboxdefault')" v-model="filterText"></el-input>
            <el-tree
               :props="props1"
               :load="loadNode1"
               @node-click="handlenodeclick"
               :lazy="true"
               :filter-node-method="filterNode"
               :render-content="renderContent"
               ref="tree2"
               :expand-on-click-node="false"
               >
            </el-tree>
        </div>


  const debounce = (function () {
    let timer = 0
    return function (func, delay) {
      clearTimeout(timer)
      timer = setTimeout(func, delay)
    }
  })()
  export default {
    data () {
      filterText: ''
    }
  }
      watch: {
      filterText (val) {
        debounce(() => {
          this.$refs.tree2.filter(val)
          }, 1000);
      }

通过延时过滤的功能，在input输入字符后，可在设置的延时时间1000（1秒）后进行过滤，减少了整个el-tree过滤的次数。