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

样式1:
首先加载第一层树节点(要有加载第一层节点的接口才ok)
vue--el-tree 树的懒加载实现_第1张图片
样式2:
当点击第一层节点,或者其他层父节点的时候,加载其子节点,形成一个懒加载的效果。
vue--el-tree 树的懒加载实现_第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);
      }
    },

你可能感兴趣的:(Vue,vue.js,javascript,前端)