element Tree树懒加载

顾尘眠

于 2025-05-07 09:30:28 发布

阅读量180

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/zero_er/article/details/147753481

html

 <el-tree
    style="max-width: 37.5rem; width: 50%; height: 100%; overflow-y: auto"
    :load="loadNode"
    :props="defaultProps"
    lazy
    
    node-key="id"
    ref="treeRef"
  />



const loadNode = async (node, resolve, reject) => {
  if (node.level === 0) {

    const res = await 接口;
    if (res.code == 200 && res.data.length > 0) {
    //默认加载第1层.
    return resolve(res.data);
    }
  } else if (node.level > 0 && node.level < 2) {
    //默认展开的层级,需要默认几层就判断一下.
    return resolve(node.data.children); //核心是这里,每次展开的时候loadNode方法就会调用一次,只需要把node.data.[这里是默认的child字段]  加载到resolve方法里就可以了.就可以实现默认加载N级,之后再使用懒加载
  } else {
    const res = await 接口;
    if (res.code === 200 && res.data.length > 0) {
      return resolve(res.data);
    } else {
      return resolve([]);
    }
  }
};