el-tree树组件的懒加载load写法

懒加载前端代码
html部分

<template>
  <div class="box">
    <div class="leftBox">
      <el-tree lazy :load="loadNode" :props="props" node-key="id">
      </el-tree>
    </div>
  </div>
</template>

js部分

<script>
export default {
  data() {
    return {
      props: {
        label: "name",
        isLeaf: "isLeaf",
      },
    };
  },
  methods: {
    loadNode(node, resolve) {
      //如果展开第一级节点,从后台加载一级节点列表
      if (node.level == 0) {
        this.loadfirstnode(resolve);
      }
      //如果展开其他级节点,动态从后台加载下一级节点列表
      if (node.level >= 1) {
        this.loadchildnode(node, resolve);
      }
    },
    //加载第一级节点
    async loadfirstnode(resolve) {
      let params = {
        level: 0,
      };
      const res = await this.$api.getTreeData(params);
      return resolve(res.data);
    },
    //加载节点的子节点集合
    async loadchildnode(node, resolve) {
      // console.log("超过二级的", node, node.level);
      let params = {
        id: node.key,
      };
      const res = await this.$api.getTreeChildData(params);
      return resolve(res.data);
    },
  },
};
</script>

使用el-tree树组件必须指定lazy和load属性,有问题就打印node

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-treeload属性用于指定加载节点的方法。在给el-tree组件设置load属性时,需要传入一个函数,该函数接收两个参数:node和resolve。node表示当前需要加载子节点的节点对象,resolve是一个回调函数,用于将加载的子节点数据传递给el-tree组件。 在给load属性传入的函数中,可以根据node的level属性判断当前需要加载的是第一级节点还是其他级节点。如果是第一级节点,可以调用loadfirstnode方法从后台加载一级节点列表;如果是其他级节点,可以调用loadchildnode方法动态从后台加载下一级节点列表。 在loadfirstnode和loadchildnode方法中,可以通过调用后台接口获取节点数据,并将数据通过resolve函数传递给el-tree组件,从而实现节点的懒加载。 在项目中使用el-tree懒加载节点时,如果新增、删除或编辑节点后需要更新该节点,可以通过调用loadNode方法重新渲染节点。在loadNode方法中,可以将resolve函数存起来,以便在需要更新节点时使用。通过调用存储的resolve函数,可以重新加载对应的节点数据,从而更新el-tree组件的显示。 总结来说,el-treeload属性用于指定加载节点的方法,可以根据节点的level属性判断需要加载的节点级别,并通过调用后台接口获取节点数据。在需要更新节点时,可以通过调用存储的resolve函数重新加载节点数据。 #### 引用[.reference_title] - *1* *2* [el-tree组件懒加载load写法](https://blog.csdn.net/fzlw000/article/details/131741424)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [elementUI el-tree loadnode懒加载 更新节点](https://blog.csdn.net/a965412234/article/details/126891429)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值