vue2+elementUI的el-tree的懒加载功能
作者：懒啦
这篇文章主要介绍了vue2+elementUI的el-tree的懒加载,文中给大家提到了element ui 中 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 的懒加载的功能，正好今天有时间来补充一下，让我们嗨起来 🤪
html 部分
下面 el-tree 标签中属性的介绍这里只介绍 props 、lazy、load属性 ，其他属性在上面链接的文章中有说明
1、props：绑定你定义的 props 变量，这里的 props变量是个对象，里面有几个键值：label、children、disabled（只有tree中带有checkbox才需要）、isLeaf（分别代表什么意思，下面的 data 部分有说明）。
2、lazy：为是否启用来加载的树型结构，true为启用，false为禁用，默认true。
3、load：lazy为true的时候生效，用来懒加载加载节点的方法，请求树的数据和逻辑处理都在这个方法汇总进行，下面的事件方法部分会有说明。
<el-tree :props="props" :load="loadNode" lazy node-key="id" :expand-no-click-node="true" ref="tree" show-checkbox :check-strictly="true" @check="checkClick" > </el-tree>
data 部分
注：
1、下面的提到的属性在后面事件方法部都会讲到具体怎样使用。
2、这里没有定义 disabled 属性，因为这里没有必要定义，事件中直接使用就行，后面事件方法部会有说明。
<script>
export default {
data(){
return{
props:{
// 用来控制展示节点内容的字段，根据后端数据自定义 label 值是什么
label:'text',
// 子级存放的位置，拼接数据时候把子级放到这里定义 childNodes 的字段中，字段名称自定义 注意：childNodes 是个数组。
children:'childNodes',
// 用来判断是否为最后一级子节点
isLeaf:'lastNode',
// 这里的 id 是用来关联上面 node-key="id" 因为这里的树使用 checkbox 所以用到了 node-key="id" 和 id， 正常的只是单纯加载tree的话是不需要的，看需求喽
id:"id"
}
}
}
};
</script>
方法事件部分
methods: {
// 功能讲解
/* 默认参数：
node：每加载一次当前加载的节点的所有数据
reslove：渲染数据的方法，把得到该节点的所有数据(数组)放到该方法中 return 出去,节点就能渲染出来了。
*/
async loadNode(node, reslove) {
/*
判断是跟节点还是子节点，
当 node.level == 0 的时候就是 tree 的跟节点（第一层；
当 node.level 不等于 0 的情况就是每一层的节点了，没必要一直判断 level 是多少级别，除非有特殊需求
*/
if (node.level == 0) {
// 这里是请求接口，根据自己的项目请求接口就可以。
let { resultValue } = await getTree(`pwi81cf45a5d07801452018091900001,${this.$store.state.userInfo.cityId}/`)
// 这里就提到了 props 对象中的 disabled 属性的用法，通过找到请求接口找到满足条件的数据，然后这个给满足条件的数据添加一个 disabled = true 就可以实现 checkbox 禁用的效果了。
resultValue.nodes[0].exValue == "" || resultValue.nodes[0].exValue == 'DYDJ' ? resultValue.nodes[0].disabled = true : null
// 将请求回来的数据放到 reslove() 方法中渲染出来。
return reslove(resultValue.nodes)
} else {
let endType = node.data.itemType.split('#')[1];
let { resultValue } = await getTree(`pwi81cf45a5d07801452018091900001,${node.data.id}/${endType}`)
/*
这里就是 props 对象中 isLeaf 属性的用法，上看我们定义的 isLeaf=‘lastNode'，
通过循环请求回来的数据，hasChildren 值为 flase (这个值一般都是后端设置数据的时候有带，至于是什么字段就得看后端是怎么定义的)，用来判断是否还有下一级别，
当 hasChildren 值为 flase 的时候就可以给 请求回来的数据中添加一个 lastNode = true 的键值了，这就在你点开改节点的父级的时候就不回有提示 ，还能展开的三角箭头了。
*/
resultValue.nodes.forEach(item => {
item.hasChildren == false ? item.lastNode = ture : null
});
/*
这里是 props 对象中 children: 'childNodes' 属性的用法，因为是懒加载每次求情回来的数据都是没有和上面的数据有关联的一个数组，这时用想通过 el-tree 来实现树型结构的话我们就要拼装数据，将去回来的数据拼装到 当前节点的 childNodes 键值当中即可
*/
node.data.childNodes = resultValue.nodes
resultValue.nodes[0].exValue == "" || resultValue.nodes[0].exValue == 'DYDJ' ? resultValue.nodes[0].disabled = true : null
return reslove(resultValue.nodes)
}
},
// 套用模版
async loadNode(node, reslove) {
if (node.level == 0) {
let res = await getData()
return reslove(res.data)
} else {
let res = await getData()
// 判断是否为最底层节点 根据自己接口返回的数据判断即可
res.data.forEach(item => {
item.hasChildren == false ? item.lastNode = ture : null
});
return reslove(res.data)
}
},
},
到此这篇关于vue2+elementUI的el-tree的懒加载的文章就介绍到这了,更多相关vue2 elementUI懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！