官方文档比较全面,这里我就自己的实际开发提供一个案例,刚刚接触前端,不足之处,感谢指正
官方文档
<el-tree
:props="props" //展示你的数据信息
:load="loadNode" //与lazy配合使用
lazy //开启懒加载
show-checkbox //是否开启复选框
>
</el-tree>
<script>
export default {
data() {
return {
props: {
label: 'name', //name 就是你自己想要在页面上展示的名称
children: 'zones',
isLeaf: 'leaf'
},
};
},
methods: {
//懒加载数据实现方法
loadNode(node, resolve) {
if (node.level === 0) { //根节点
return resolve([{ name: 'region' }]);
}
if (node.level > 1) return resolve([]);
//根节点下的子节点
setTimeout(() => {
const data = [{
name: 'leaf',
leaf: true
}, {
name: 'zone'
}];
resolve(data);
}, 500);
}
}
};
</script>
我对上面案例中最重要的部分进行了说明,下面展示一下我的实际代码
<template>
<div class="orgStruTree" style="background-color: #ffffff">
<el-tree
:props="props"
ref="tree"
node-key="orgId"
class="margin-top10"
show-checkbox
highlight-current
@node-click="handleNodeClick"
lazy
:load ="loadNode"
></el-tree>
</div>
</template>
<script>
//axios 统一的api管理
import { orgInfoNext, orgInfoById,empInfoByOrgUuid } from "../api/api";
export default {
name: "orgStruTree",
data() {
return {
props: {
label: 'orgName',
children: 'child',
isLeaf: 'leaf'
},
};
},
methods: {
//点击节点方法 这里可以不用,我是为了实现其他功能
handleNodeClick(node,data) {
console.log("点击树节点");
console.log(node);
console.log(data);
this.clickTree = data;
},
//懒加载方法
loadNode(node,resolve){
//根节点数据
if(node.level === 0)
{
let params = {
orgId : 1
};
//向后台请求根节点数据
orgInfoById(params).then(res => {
if(res.data.code == 200){
//声明一个对象,用来接收根节点数据
const data = res.data.result;
return resolve([data]);
}else {
this.$message({
message: res.data.message,
type: "error",
});
}
}).catch(res => {
resolve([]);
});
} else {
this.getChildsList(node,resolve);
}
},
//获取加载不同的数据层 async采用异步方式
async getChildsList(node,resolve) {
//查询当前组织的下级组织
let params = {
orgId : node.data.orgId,
};
orgInfoNext(params).then((res) =>{
if(res.code == 200){
const data = res.result.object;
//将数据渲染到tree中
resolve(data);
} else {
this.$message({
message: res.message,
type: "error",
});
}
}).catch(res =>{
resolve([]);
});
}
};
</script>