为什么用?
权限树的展示,给角色分配权限。
基本使用
<el-tree
ref="tree"
:data="data"
show-checkbox
node-key="id" // Tree的key:唯一标识
:default-expanded-keys="[]" // 默认展开的key
:default-checked-keys="[]" // 默认选中的key
:props="defaultProps">
</el-tree>
data () {
return {
data: [], // 数据源,权限树
defaultProps: { // 绑定规则
children: 'children',
label: 'menuName'
}
},
methods: {
// 权限树的展示
// 1.发起get请求,获取权限列表,接收一个权限树,绑定到数据源
// 2.发起get请求,根据角色Id,获取拥有的权限,绑定到默认展开项、选中项
// 获取选中的权限,用于提交修改请求
getChecked(){
// 1.获取选中的key数组
// 获取选中的全部节点,返回ID数组
const arr = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
// 获取选中的叶子节点,返回ID数组
// const arr = this.$refs.tree.getCheckedKeys()
// 获取选择的一级二级菜单,返回ID数组
// const arr = this.$refs.tree.getHalfCheckedKeys()
console.log(arr)
// 发起put请求
}
}