角色列表
<template>
<div>
<el-tree
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
></el-tree>
</div>
</template>
<script>
import { rolesGet } from "@/http/request.js";
export default {
name: "RolesView",
data() {
return {
data: [],
defaultProps: {
children: "children",
label:'authName'
/* label:function(data){
label方法可以返回 你要渲染的数据的名字到底叫什么
出现找不到名字的原因就是data后面的名字不对
那么我们可以这样 采用三步运算法则
return data.authName?data.authName:data.roleName
} */
},
};
},
created() {
rolesGet("roles")
.then((res) => {
console.log(res);
let { meta, data } = res.data;
if (meta.status == 200) {
改变原来的数据，把第一层多加一个authName，值为roleName的字段
data.forEach(r=>{
r.authName=r.roleName
})
this.data=data
} else {
this.$message.error(meta.msg);
}
})
.catch((err) => {
console.log(err);
});
},
methods: {
handleNodeClick(data) {
console.log(data);
},
},
};
列表懒加载
<template>
<div>
<el-tree
:props="props"
:load="loadNode"
lazy
show-checkbox
@check-change="handleCheckChange"
>
</el-tree>
</div>
</template>
<script>
export default {
name: "RightsView",
data() {
return {
props: {
label: "name",
children: "zones",
},
count: 1,
};
},
methods: {
/* 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 */
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
},
/* 每点一次都会执行一遍 */
loadNode(node, resolve) {
/* 第一层给个数组数据 */
if (node.level === 0) {
return resolve([{ name: "region1" }, { name: "region2" }]);
}
/* 第5层开始不给数据 */
if (node.level > 3) return resolve([]);
/* 这个开关是用来判断给谁加子数据的 */
var hasChild;
if (node.data.name === "region1") {
hasChild = true;
} else if (node.data.name === "region2") {
hasChild = false;
} else {
/* 其他的节点点击是否有数据 是随机值
如果0-1之间的随机数大于0.5则为true，否则为false */
hasChild = Math.random() > 0.5;
}
setTimeout(() => {
var data;
if (hasChild) {
data = [
{
name: "zone" + this.count++,
},
{
name: "zone" + this.count++,
},
];
} else {
data = [];
}
resolve(data);
}, 500);
},
},
};
