el-tree 懒加载搜索

实现 el-tree 的懒加载搜索，可以通过监听输入框的值来控制懒加载。具体实现步骤如下：

1. 首先，在 el-tree 标签上添加一个 ref 属性，用于获取 el-tree 的实例，例如 ref="tree" 。
2. 在 data 中定义一个 filterText 变量，用于保存输入框的值。
3. 在 watch 中监听 filterText 变量的变化，当有值时，关闭懒加载并调用后端搜索的方法；当没有值时，开启懒加载并重新加载数据 。
4. 在 el-tree 标签上添加 lazy 属性并设置为 true，表示开启懒加载 。
5. 在 el-tree 标签上添加 load 属性，并绑定一个 loadNode 方法，用于在树节点展开时加载数据 。

以下是代码示例：

<template>
  <div>
    <input type="text" v-model="filterText" placeholder="输入搜索关键字" />
    <el-tree
      :data="orgList"
      ref="tree"
      show-checkbox
      :props="defaultProps"
      node-key="id"
      @node-click="handleNodeClick"
      @check-change="handleClick"
      :default-expanded-keys="expandArr"
      lazy
      :load="loadNode"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span class="tree-icon">
          <img v-if="data.isTop" style="width: 20px; height: 16px" src="@/assets/img/repositoryImg/tree.png" alt />
          &nbsp;{{ node.label }}
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterText: '', // 保存输入框的值
      orgList: [], // 树形数据
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  watch: {
    filterText(val) {
      if (val) {
        this.$refs.tree.$data.store.lazy = false; // 当输入框有值时关闭懒加载
        this.getSeachList(); // 获取后端搜索的数据
      } else {
        this.$refs.tree.$data.store.lazy = true; // 开启懒加载
        this.getOrgList(); // 加载数据
      }
    }
  },
  methods: {
    // 加载树节点方法
    loadNode(node, resolve) {
      // 根据业务需求实现加载树节点数据的方法
    },
    // 获取后端搜索的数据
    getSeachList() {
      // 根据业务需求实现后端搜索的方法
    },
    // 获取树形数据
    getOrgList() {
      // 根据业务需求实现获取树形数据的方法
    },
    // 节点点击事件
    handleNodeClick(node) {
      // 根据业务需求实现节点点击事件的方法
    },
    // 复选框点击事件
    handleClick() {
      // 根据业务需求实现复选框点击事件的方法
    }
  }
};
</script>

以上就是实现 el-tree 懒加载搜索的方法。根据输入框的值来控制懒加载开关，并实现后端搜索的数据获取。同时使用 lazy 属性和 load 方法实现 el-tree 的懒加载功能。