1. 实现elementUI的el-tree基本的懒加载(通过点击触发事件,加载下一级)
html部分
<el-tree
ref="eltree"
:data="treeData"
:props="defaultProps"
:load="loadNode"
lazy
></el-tree>
实现懒加载
loadNode(node, resolve) { //懒加载的方法
if (node.level === 0) { //如果是第一级,调取接口resolve出对应数据的一级数据
allOperate().then(res => {
if (res.code === 0) {
//通过map重组数据结构
let data = res.data.map((item, index) => {
return {
label: item.operatorName,
operatorID: item.operatorID
};
});
resolve(data);
}
});
}
if (node.level === 1) { //点击一级,触发调用第二级数据
allcharge(node.data.operatorID).then(res => {
if (res.code === 0) {
let children = res.data.map((item, index) => ({
label: item.stationName,
stationID: item.stationID
}));
resolve(children);
}
});
}
if (node.level === 2) {
allStaion(node.data.stationID).then(res => {
if (res.code === 0) {
let children = res.data.map((item, index) => ({
label: item.equipmentName,
equipmentID: item.equipmentID
}));
resolve(children);
}
});
}
//没有第三级,点击第二级不会再有新的数据
if (node.level > 2) return resolve([]);
},
2.其实基本的二级并不能满足一些需求,比如当二级数据过多的时候,浏览器也会渲染很久,因为,有时候需要将某一级的数据在进行分批显示,如下例子,二级数据过多时,点击更多进行加载二级剩下数据,每次二级只显示100条
如图 - 点击更多加载二级数据
HTML
<el-tree
ref="eltree"
:props="defaultProps"
:data="treeData"
node-key="operatorID" //高亮的依据标识
:highlight-current="hiC" //设置高亮
@node-expand="handleNodeClick"
@node-click="handleNodeC"
></el-tree>
数据结构
注明-由于二级数据有3000条后台是在一次性返回的,查看浏览器发现返回数据是很快的,只是渲染3000条数据很慢,因此对 数据进行梳理,利用loadMore进行标识具体是哪个一级在点击更多,去调对应接口
defaultProps: {
children: "children",
label: "label",
isLeaf: "leaf"
},
treeData:[],
loadMore:{} //用户保存,点击第几次更多
js部分
//初次加载,获取第一级数据结构
async getTree() {
let res = await allOperate();
if (res.code === 0) {
//对数据进行重组
this.treeData = res.data.map((item, index) => {
return {
label: item.operatorName,
operatorID: item.operatorID,
children: [{}]
};
});
//记录所有的一级当前更多点击为0
this.treeData.forEach(item => {
this.loadMore[item.operatorID] = 0;
});
this.$nextTick(() => {
if (this.$route.query.operatorID) {
//设置默认显示的数据高亮
this.$refs.eltree.setCurrentKey(this.$route.query.operatorID);
}
});
}
},
//节点点击时候被回调 - 节点点击都会触发
handleNodeC(row, node, nodeA, isIcon) {
// 二级节点,点击时候,需求是触发新的查询,这里为了避免多次点击,数据返回显示,利
// 用节流优化性能
if (node.level === 2 && row.stationID) {
// 查询列表
this.showFont = false;
this.stationID = row.stationID;
this.time && clearTimeout(this.time);
if (this.immediate) {
this.immediate = false;
this.getCToS();
this.time = setTimeout(() => {}, 1000);
} else {
this.time = setTimeout(() => {
this.getCToS();
this.immediate = true;
}, 500);
}
} else {
this.tableData = [];
}
},
// 节点被展开 - 只有有儿子的节点才会被触发
handleNodeClick(row, node, nodeA) {
//点击一级节点时候,获取二级节点
if (
node.level === 1 &&
row.operatorID &&
row.children &&
row.children.length === 1
) {
//调用接口获取二级节点
this.getTwoNode(row.operatorID);
}
// 点击更多 || 更多前的小图标(写在这里不写handleNodeC,避免当点击更多文字,触发两次,造成点击更多次数出错)
if (row.label === "更多" && node.level === 2 && row.ismore) {
// 切换状态
row.label = "加载中"
this.loadMore[node.parent.data.operatorID]++;
this.getTwoNode(node.parent.data.operatorID);
// this.handleNodeC(row, node, nodeA, true);
}
},
//获取二级节点
async getTwoNode(operatorID) {
//获取当前点击节点的更多次数
let current = this.loadMore[operatorID];
let obj = {
current,
operatorID,
size: 100
};
let res = await allcharge(obj);
if (res.code === 0) {
let data = res.data.rows.map((item, index) => {
return {
label: item.stationName,
stationID: item.stationID
};
});
// 如果二级数据超多100条,进行添加更多
if (res.data.total - (current + 1) * 100 > 0) {
// debugger;
this.treeData.forEach(item => {
if (item.operatorID === operatorID) {
item["children"].splice(current * 100, 1);
item["children"] = item["children"].concat(data);
item["children"].push({
label: "更多",
ismore: true,
children: [{}]
});
}
});
} else { //如果二级数据少于一百条,直接显示
this.treeData.forEach(item => {
if (item.operatorID === operatorID) {
item["children"].splice(current * 100, 1);
item["children"] = item["children"].concat(data);
}
});
}
}
},
3.设置树默认高亮
一定要设置node-key 进行标识
this.$refs.eltree.setCurrentKe(标识)
if (this.$route.query.operatorID) {
//设置默认显示的数据高亮
this.$refs.eltree.setCurrentKey(this.$route.query.operatorID);
}
其实在官网的api中有多种方式
4.本文案例中用到的api
Attributes
events
方法