<template>
<div>
<el-tree
node-key="id"
lazy
:load="loadNode"
:props="defaultProps"
:expand-on-click-node="false"
:check-on-click-node="true"
v-loading="list.loading"
@node-click="nodeClick"
ref="tree"
>
</el-tree>
</div>
</template>
<script>
// https://www.fastmock.site/mock/9846b0461be6cbf4f1dfd50fd4b9b0bb/tree/zxt
import axios from "axios";
export default {
data() {
return {
list: {
loading: false,
isExpand: false,
},
defaultProps: {
// tree 控件的数据结构,需要设置 isLeaf
children: "children",
label: "name",
isLeaf: "leaf",
},
loading: false,
curPath:'',
curNode:''
};
},
methods: {
nodeClick(data, node) {
this.curPath = data.path;
this.curNode = node;
},
// 实现局部刷新,在点击弹窗处调用的
partialRefreshpartialRefresh(node) {
node.loaded = false; // 设置loaded为false;模拟一次节点展开事件,加载重命名后的新数据;
node.expand(); // 新建子节点是刷新一次本节点的展开请求,而重命名和删除则需要刷新父级节点的的展开事件,可以设置node.parent.loaded = false;node.parent.expand();
},
async loadNode(node, resolve) {
// 懒加载
// console.log(52,node);
// if (node.level === 0) {
// return resolve(await this.getTagList());
// } else if (node.level === 1) {
// return resolve(await this.getTagApiList(node.label));
// }else if (node.level === 2) {
// return resolve(await this.TagApiList(node.label));
// }
// else {
// return resolve([]); // 防止该节点没有子节点时一直转圈的问题出现
// }
return resolve(await this.getTagList(node, resolve))
},
async getTagList(node, resolve) {
var level = ''
console.log(67,node);
if(node.level==0){
level='zxt'
}else if(node.level==1){
level='zxtb'
}else{
level='zxtc'
}
console.log(node.level,level);
// 获取所有接口所属模块 -> 第一层
this.list.loading = true;
const res = await axios.get(
`https://www.fastmock.site/mock/9846b0461be6cbf4f1dfd50fd4b9b0bb/tree/${level}`
);
const tags = res.data.data;
tags.forEach((item, index) => {
// 节点需要构建为 tree 的结构
item.name = item.label;
item.id = index;
item.leaf = false;
});
this.list.loading = false;
console.log(55, tags);
return tags;
},
// async getTagList(node, resolve) {
// // 获取所有接口所属模块 -> 第一层
// this.list.loading = true;
// const res = await axios.get(
// "https://www.fastmock.site/mock/9846b0461be6cbf4f1dfd50fd4b9b0bb/tree/zxt"
// );
// const tags = res.data.data;
// tags.forEach((item, index) => {
// // 节点需要构建为 tree 的结构
// item.name = item.label;
// item.id = index;
// item.leaf = false;
// });
// this.list.loading = false;
// console.log(55, tags);
// return tags;
// },
async getTagApiList(tag) {
// 查询模块下的接口列表 -> 第二层
const res = await axios.get(
"https://www.fastmock.site/mock/9846b0461be6cbf4f1dfd50fd4b9b0bb/tree/zxtb"
);
const results = res.data.data;
console.log(85,results);
results.forEach((item) => {
item.name = item.label;
item.id;
item.leaf = true;
});
return results;
},
async TagApiList(tag) {
// 查询模块下的接口列表 -> 第二层
const res = await axios.get(
"https://www.fastmock.site/mock/9846b0461be6cbf4f1dfd50fd4b9b0bb/tree/zxtc"
);
const results = res.data.data;
console.log(103,results);
results.forEach((item) => {
item.name = item.label;
item.id;
item.leaf = true;
});
return results;
},
},
};
</script>
<style>
</style>
关于elementui中的tree形组件的懒加载模式的使用
最新推荐文章于 2024-06-04 11:35:25 发布