el-tree-select

在Element UI的el-tree-select树形选择组件是由下拉菜单的树形选择器，结合了 el-tree 和 el-select 两个组件的功能。 在api中可以参考el-tree和el-select

element-ui-plus官网：https://element-plus.org/zh-CN/component/tree-select.html

在工作中经常遇到树形结构，但是数据太多，又会影响页面的加载，影响用户体验。
现在在el-tree-select中使用lazy来实现下一节点的加载!

以下是el-tree-select懒加载步骤

1、设置el-tree-select的lazy属性为true。

data数据源 、 :render-after-expand="false“ 不在加载 时展开、lazy默认true load方法，定义初始以及点击懒加载时的数据 （注意此函数没有设置成功可能会不显示）、 @node-click=“clickNode” 此函数可以在点击时保存

 <el-tree-select
                  v-model="treeNode"
                  :data="deptInfoLists"
                  :render-after-expand="false"
                  :props="{
                    checkStrictly: true,
                    value: 'id',
                    label: 'name',
                    children: 'children'
                  }"
                  lazy
                  :load="load"
                  @node-click="clickNode"
                />```
```bash
在这里插入代码片

2、load函数

定义一个方法来处理懒加载，该方法需要返回一个Promise对象，用于异步加载子节点数据。

const load = async (node, resolve) => {
  try {
    if (node.level === 0) {
      // 加载根节点数据
      const rootData = await fetchRootData();
      resolve(rootData);
    } else {
      // 加载子节点数据
      // 加载子节点数据
      const childrenData = await fetchChildrenData();
      resolve(childrenData);
    }
  } catch (err) {
    console.error("加载数据失败:", err);
    resolve([]); // 如果加载失败，返回空数组
  }
};

//此函数放置自己的接口 通过第一级的id查询此id下的children 
const fetchRootData =(){
 axios.get('url/to/load/root/nodes')
        .then(response => {
          resolve(response.data);
        })
}
//数据结构
const data= [{
name:"第一级"，
id:1,
children:[]
}]

const clickNode = (noed) => {
  treeNode.value = node.id
};

通过以上步骤，您就可以在el-tree-select组件中实现数据过多时的懒加载功能了。这样可以在用户操作时动态加载节点数据，提高页面性能和用户体验。