el-tree 懒加载树

el-tree 懒加载树

• 添加自定义图标
• 指定叶子节点
• 懒加载

---

<template><div><el-treeclass="filter-tree":data="treeData":props="defaultProps"ref="tree"lazy:load="loadTree":expand-on-click-node="true"@node-click="nodeClick"><span slot-scope="{ node, data }" class="span__"><imgclass="sxtImg"v-if="data.channelId && data.isOnline == 'true'"src="../../../../../assets/image/sxt1.png"alt=""title="设备在线"/><imgclass="sxtImg"v-if="data.channelId && data.isOnline != 'true'"src="../../../../../assets/image/sxt2.png"alt=""title="设备离线"/><span:class="[data.channelId && data.isOnline != 'true' ? 'offline' : 'online',]">{{ node.label }}</span></span></el-tree></div>
</template><script>
import { spTreeList } from "@/utils/api.js";
export default {data() {return {defaultProps: {children: "children",label: "name",isLeaf: (data) => {return data.channelId != null;  // ※ 指定哪种情况是最后一级(否则懒加载的树叶子节点前会有展开箭头,需要点一下才消失)},},treeData: [],};},mounted() {},methods: {nodeClick(data, node, comp) {if (data.channelId && data.isOnline != "true") {this.$message.error("当前设备离线!");return;}this.$emit("click", data, node.isLeaf);},// 懒加载加载方法，首次加载树的时候会被触发loadTree(node, resolve) {spTreeList({ orgCode: "" }).then((res) => {// this.rootNode = node;// this.rootResolve = resolve;let rootMainResolve = resolve;let treedata = [];if (node.level == 0) {treedata.push(res.data);return resolve(...treedata);}// 加载子级// if (node.data.isParent && node.data.parentId != "") {//   this.getChild(node.data, node.data.parentId, rootMainResolve);// } else {//   return resolve([]); // 防止不停转圈// }// 加载子级if (node.data.channelId) {return resolve([]); // 防止不停转圈} else {this.getChild(node.data, node.data.parentId, rootMainResolve);}});},getChild(data, type, resolve) {spTreeList({orgCode: data.id,}).then((res) => {return resolve(res.data);});},// 重新渲染树的根节点resetNode() {spTreeList({ orgCode: "" }).then((res) => {this.treedata = res.data;});},},
};
</script><style lang="scss" scoped>/deep/.el-tree-node__content {background: transparent;}/deep/ .el-tree__empty-block {background: transparent;}/deep/.el-tree {background: transparent;}/deep/.el-tree-node__label {color: #fff;}/deep/.el-tree-node__content:hover,/deep/.el-upload-list__item:hover {background: linear-gradient(90deg,rgba(74, 204, 255, 0.52),rgba(69, 122, 230, 0));position: relative;}/deep/.el-tree-node__content:hover::before {content: "";position: absolute;left: 0;top: 0;background: #4accff;width: 4px;height: 100%;}/deep/ .is-current > .el-tree-node__content {position: relative;background: linear-gradient(90deg,rgba(74, 204, 255, 0.52),rgba(69, 122, 230, 0));/deep/ .is-current > .el-tree-node__content::before {content: "";position: absolute;left: 0px;top: 0;background: #4accff;width: 4px;height: 100%;}}.online {color: #fff;
}
.offline {color: rgba(255, 255, 255, 0.6);
}.sxtImg {vertical-align: middle;margin-right: 5px;
}
</style>