vue2+elementUI的el-tree的懒加载

在使用el-tree的懒加载时 我需要每一个层 调用一个接口 共三个层级

调用懒加载时 必须要有这几个属性
:props=“props” ----> 其中的isLeaf 来判断是不是最后那个叶子节点
:load=“loadNode” ---->加载子树数据的方法,仅当 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([]);
      }
    },
}
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值