vue--el-tree 树的懒加载实现

样式1:
首先加载第一层树节点(要有加载第一层节点的接口才ok)
在这里插入图片描述
样式2:
当点击第一层节点,或者其他层父节点的时候,加载其子节点,形成一个懒加载的效果。
在这里插入图片描述
代码实现:
重要的是在tree中设置
:load=“loadNode”
lazy

 <el-tree
              :data="treeData"
              node-key="id"
              :filter-node-method="filterNode"
              ref="indexTree"
              :props="treeDataDefaultProp"
              :expand-on-click-node="false"
              class="tree_Style"
              :load="loadNode"
              lazy
            >
            </el-tree>
created() {
    this.init();
  },
 methods: {
    // 初始化第一层树
    init() {
      this.getTreeData();
    },
    // 得到第一层树的列表
    async getTreeData() {
      const param = {
        type: Number(this.cateTabActive),
        keyword: this.keyword
        };
      const res = await this.$api.get('/api/category', param);
      if (res.code == 200) {
      // treeData 就是树绑定的数据
        this.treeData = res.info;
      } else {
        return false;
      }
    },
     // 树的懒加载
    loadNode(node, reslove) {
      let that = this;
      if (node.level === 0) {
        reslove(that.treeData);
      }
      if (node.level >= 1) {
        this.loadNodeChildren(node, reslove);
      }
    },
    // 树的懒加载获取子节点
    async loadNodeChildren(node, reslove) {
      let param = {
        categoryId: node.data.id,
        type: Number(this.cateTabActive)
      };
      const res = await this.$api.get('/api/category', param);
      let resArr = [];
      if (res.code === 200) {
        res.info.forEach(item => {
          item = JSON.parse(JSON.stringify(item));
          resArr.push({
            name: item.name,
            id: item.id,
            leaf: item.leaf,
            parentCategoryId: item.parentCategoryId,
            currentLevel: item.currentLevel,
            relateCount: item.relateCount
          });
        });
        // 将得到的孩子列表,塞进树中
        this.$refs.indexTree.updateKeyChildren(node.data.id, resArr);
        return reslove(res.info);
      }
    },
  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值