添加权限

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;

            }

          });