vue2 elementUI懒加载
懒啦 人气:0lazy 属性为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 的懒加载的功能,正好今天有时间来补充一下,让我们嗨起来
加载全部内容