用清晰的层级结构展示信息，可展开或折叠。
效果演示
trees.vue代码
<template> <div> <!-- 树形控件 --> <el-tree :data="treesList" :props="treesProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys"></el-tree> </div> </template>
Js代码
<script>
export default {
data(){
return{
// 树形数据源
treesList:[],
// 树形控件的属性绑定对象
treesProps: {
label: 'name',
children: 'children'
},
// 默认选择的节点id值数组
defKeys:[1,2]
}
},
methods: {
// 分配权限对话框
async showSetTreesDialog(){
// 获取所有权限的数据
const {data:res} = await this.$http.get('permission/trees')
console.log(res.data)
this.treesList = res.data
}
}
}
</script>
数据源格式
{
"code": 0,
"msg": "成功",
"data": [
{
"id": 1,
"name": "用户管理",
"path": "",
"pid": 0,
"children": [
{
"id": 6,
"name": "用户列表",
"path": "/user",
"pid": 1
}
]
}
]
}
按照上面的数据源格式即可生成树形折叠格式列表vue elementUI Tree 树形控件的使用方法-遇见你与你分享
