element Tree树懒加载

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"
  />

js



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([]);
    }
  }
};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值