渲染后台数据element-ui的使用
<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);
},
},
};
