vue2+elementUI的el-tree的懒加载功能

lazy 属性为true 时生效
lazy ----> 是否懒加载子节点，需与 load 方法结合使用

isLeaf可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。

HTML部分

<el-tree
          class="filter-tree"
          ref="tree"
          accordion
          :data="leftData"
          @node-click="handleNodeClick"
          node-key="listId"
          :current-node-key="currentNodeKey"
          :highlight-current="true"
          :props="defaultProps"
          :default-expanded-keys="idArr"
          lazy
          :load="loadNode"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <el-tooltip
              class="item"
              effect="dark"
              :content="node.label"
              placement="top-start"
            >
              <span :id="data.listId">{{ node.label }}</span>
            </el-tooltip>
          </span>
 </el-tree>

JS部分

import {
  getMenuList,
  getNodeMenuList,
  getDataList,
} from "@/api/index";
export default {
data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
        isLeaf: "isLeaf",
      },
      currentNodeKey: "",
      leftData:[],
    }
  },
  methods:{
	// 懒加载获取数据
    loadNode(node, resolve) {
      if (node.level === 0) {// 第一层数据
      getMenuList({}).then((res) => {
      //左面导航栏省份信息
      if (res.data.resp_code == "200") {
        let data = res.data.datas;
        for (let key in data) {
          this.leftData.push({
            name: key,
            listId: key,
          });
        }
      }
    });
        return resolve(this.leftData);
      }
      if (node.level === 1) {// 第二层数据
        let provinceName = {
          provinceName: node.label, //上海
        };
        let twoList = [];
        getNodeMenuList(provinceName).then((res) => {
          res.data.datas.forEach((items) => {
            twoList.push({
              listId: items.listID,
              name: items.nodeName,
              provinceName: items.provinceName,
              children: [],
            });
            twoList.isLeaf = true;
          });
        });
        setTimeout(() => {
          resolve(twoList);
        }, 1000);
      }
      if (node.level == 2) {//第三层数据
        let obj = {
          nodeName: node.data.name,
          provinceName: node.data.provinceName,
        };
        let children = [];
        getDataList(obj).then((res) => {
          if (res.data.resp_code == "200") {
            res.data.datas.forEach((item, index) => {
              node.data.children.push({
                description: item.description,
                links: item.links,
                listId: item.listId,
                name: item.name,
                provinceName: item.provinceName,
                isLeaf: true,// 判断是不是子节点（最后一层数据 是否显示下拉图标） 如果不显示下拉图标为true 如果显示就可以不写
              });
            });
          }
        });
        resolve(node.data.children);
      }
      if (node.level > 2) {
        resolve([]);
      }
    },
}
}

element ui 中 el-tree 实现懒加载

在上次 element UI 中的 el-tree 实现 checkbox 单选框功能，及 bus 传递参数的方法 篇章中有提到 le-tree 的懒加载的功能，正好今天有时间来补充一下，让我们嗨起来