已经获取到了数据了,如何把它填充到el-tree中,让某些个复选框处于选中状态?
答: setCheckedKeys (接收勾选节点数据的数组) node-key(设置目前勾选的节点,使用此方法必须设置 node-key=‘’ 属性)
官网: element.eleme.io/#/zh-CN/com…
. 给tree补充属性node-key
<!-- 权限点数据展示 -->
<el-tree
ref="refTree"
:data="permissionData"
//渲染数据
:props="{ label: 'name' }"
//默认展开树形结构
:default-expand-all="true"
//显示复选框
:show-checkbox="true"
设置true可以关闭父子关联(比如选中员工管理。测试也会同时选中设置为true就不会关联)
:check-strictly="true"
+ node-key="id"
/>
调用setCheckedKeys
// 调用接口,获取当前这个角色已经具备的权限
async loadPermissionByRoleId() {
// 根据roleId获取当前这个角色已经具备的权限
const res = await getRoleDetail(this.roleId)
this.permIds = res.data.permIds
console.log('获取当前角色的已有的权限点数据', this.permIds)
// 回填到树上
+ this.$refs.refTree.setCheckedKeys(this.permIds这里是选中的id)
}
//保存权限分配的数据
async hSubmit() {
//重新拿到树上的permIds
this.permIds = this.$refs.refTree.getCheckedKeys()
await assignPerm({ id: this.roleId, permIds: this.permIds })
this.$message.success('保存角色的权限成功')
this.$emit('close')
// 重置选择,用了v-if可不写
// this.$refs.tree.setCheckedKeys([])
},