elementui tree懒加载guolv

### ElementUI Tree 组件懒加载与过滤功能实现

#### 懒加载机制介绍
为了优化性能并减少初始数据量，在展示大量节点时可以采用懒加载的方式。当用户展开某个父级节点时才请求子节点的数据，而不是一次性加载全部节点。

对于 `el-tree` 组件来说，可以通过设置属性 `lazy=true` 来开启懒加载模式，并通过指定 `load` 函数来定义如何异步获取子节点的信息[^1]。

// 定义 load 方法用于懒加载子节点
function loadChildren(node, resolve) {
    // 假设这里发起 AJAX 请求获得子节点列表 data
    setTimeout(() => {  // 使用setTimeout模拟网络延迟
        const children = [
            /* 子节点对象数组 */
        ];
        resolve(children);
    }, 500);  // 模拟半秒延时
}

#### 节点过滤逻辑集成
要实现在懒加载基础上支持关键词过滤，则需自定义 `filterNodeMethod` 属性对应的回调函数。此函数接收两个参数：一个是待匹配的关键字字符串；另一个是要判断是否显示的当前节点对象。如果返回 true 表示该节点应该被保留下来参与渲染，反之则会被隐藏掉[^2]。

<template>
  <div id="app">
    <!-- 输入框绑定 v-model 到 filterText -->
    <input type="text" placeholder="输入关键字..." v-model="filterText"/>
    
    <!-- el-tree 设置 lazy 和 load 方法以及 filter-node-method -->
    <el-tree :data="treeData"
             show-checkbox
             node-key="id"
             ref="treeRef"
             highlight-current
             :props="{label:'name'}"
             :render-content="renderContent"
             @node-expand="handleExpand"
             :expand-on-click-node="false"
             :default-expanded-keys="[rootId]"
             :current-node-key.sync="selectedNodeId"
             :filter-node-method="customFilterMethod"
             :lazy="true"
             :load="loadChildren"></el-tree>
  </div>
</template>

<script>
export default {
  name: 'App',
  
  methods:{
      customFilterMethod(value,node){
          if (!value || !node.data.name.includes(value)) return false;
          this.$refs.treeRef.updateKeyChildren();
          return true;          
      },
      
      handleExpand(data){
          console.log('expanded:',data.id);
      },

      loadChildren(node,callback){
          let parentId=node.level===0 ? null : node.data.id;

          fetch(`/api/getChildNodes?parentId=${parentId}`)
              .then(response=>response.json())
              .then(json=>{
                  callback(json.children||[]);
              });
      }
  }

};
</script>

上述代码片段展示了如何结合使用 `el-tree` 的懒加载特性和自定义过滤方法完成树结构中的动态查询筛选操作。每当用户修改搜索栏内的文字内容时都会触发重新计算哪些项应当呈现给用户的流程。