el-tree如何同时支持懒加载和搜索？

Question

el-tree如果加了lazy，data的数据是异步加载的，点击展开再会有节点的数据，未加载的节点是搜索不到的。

有什么办法可以让两者同时支持吗？

Answer 1

这种情况我最近做过，我这边是在搜索栏回车后向后台发送请求，后台把过滤后的数据给你重新渲染tree就可以，和后台人员说明一下就可以。

Answer 2

支持，你要先先对数据进行预处理：

<template>
  <div>
    <el-input
      placeholder="请输入搜索内容"
      @input="handleSearch"
    ></el-input>
    <el-tree
      ref="tree"
      :data="treeData"
      :props="defaultProps"
      :lazy="true"
      :load="loadNode"
    ></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      searchQuery: "",
      searchTimer: null
    };
  },
  methods: {
    handleSearch(query) {
      this.searchQuery = query;
      clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        this.fetchSearchTreeData();
      }, 500);
    },
    async loadNode(node, resolve) {
      // 懒加载逻辑
      // 根据节点和搜索查询获取子节点
      const data = await this.fetchNodeChildren(node, this.searchQuery);
      resolve(data);
    },
    async fetchNodeChildren(node, query) {
      // 从后端获取子节点数据
      
      const data = await axios.get("/api/getChildren", {
        params: {
          nodeId: node.id,
          searchQuery: query
        }
      });
      return data;
    },
    async fetchSearchTreeData() {
      // 获取与搜索查询匹配的树数据
      const data = await this.fetchNodeChildren({ id: null }, this.searchQuery);
      this.treeData = data;
    },
  },
  mounted() {
    this.fetchSearchTreeData(); // 在组件挂载时获取所有节点数据
  },
};
</script>