添加权限
element中tree控件
1.props=>配置选项，具体看下表(object)
2.default-expand-all=>是否默认展开所有节点（false）
3.default-checked-keys=》默认勾选的节点的 key 的数组
4.highlight-current=》是否高亮当前选中节点，默认值是 false
具体可以查看https://element.eleme.cn/#/zh-CN/component/tree
<el-form-item label="权限数组" prop="permission">
<el-tree
:data="permissionData"
show-checkbox
node-key="id"
ref="tree"
highlight-current
:props="permissionProps"
:default-expand-all=true
:default-checked-keys='resourceCheckedKey'
>
</el-tree>
</el-form-item>
data要定义一下
permissionData:[],//权限数据
permissionProps:{
children: 'children',
label: 'route'
},
resourceCheckedKey:[],//默认展示的权限数据
初始化定义表单（因为我的修改和弹出层是一个表单）
//表单数据data
FormData: {},//表单
resetFormData: function(){
this.FormData = {
id: '',
name: '',
deptId: 1,
deptName:'',
permission: [],//tree数组
}
},
回调选项中权限
点击修改时候，会勾选一开始选择后的权限,element有个树形控件里面有“getCheckedKeys（）方法”
image
先在添加权限树方法里面要赋值一下
//定义先的变量selectPermission
let selectPermission = this.$refs['tree'].getCheckedKeys();
//可以在判断selectPermission长度
if(selectPermission.count < 1){
this.$message.error('请权限权限');
return false;
}
在请求添加或者修改的接口是时候赋值一下：
this.FormData.permission = selectPermission
3.整体代码如下
//添加
submitForm: function(formName) {
let selectPermission = this.$refs['tree'].getCheckedKeys();
if (selectPermission.count < 1) {
this.$message.error('请权限权限');
return false;
}
this.$refs[formName].validate((valid) => {
if (valid) {
this.FormData.permission = selectPermission
RolesApi.add(this.FormData).then(res => {
if (res.code === 200) {
this.$message({
message: '添加成功',
type: 'success'
});
this.dialogFormVisible = false;//关闭窗口
this.getUserlist();
}else {
this.$message.error(res.msg);
}
});
}
});
}
//修改
updateData: function(formName) {
let selectPermission = this.$refs['tree'].getCheckedKeys();
if (selectPermission.count < 1) {
this.$message.error('请权限权限');
return false;
}
this.$refs[formName].validate((valid) => {
if (valid) {
this.FormData.permission = selectPermission
RolesApi.update(this.FormData).then(res => {
this.$message({
message: '修改成功',
type: 'success'
});
this.getUserlist();
this.dialogFormVisible = false;//关闭窗口
});
} else {
this.$message.error(res.msg);
return false;
}
});
网友评论