Vue el-tree延时过滤

最近做了一个项目，把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过滤的次数。