element-ui 用 el-checkbox-group 做权限管理

template

<el-checkbox-group v-model="menu_ide" v-for="(item,index) in menu_idss" :key="index">

   <el-checkbox :label="item.label" style="margin-top:10px;margin-left:20px;"></el-checkbox>

</el-checkbox-group>

 

data:

　　　　　// 权限数组 ----> 本身的权限列表,用来做对比

                menu_idss : [],

                menu_ide : [], //绑定的权限数组，用来显示有几个权限

                user_id : '', // 用户id，用于向后端发送请求查看当前用户是有多少权限

                menu_ids : [], //权限中转站，可要可不要

 

methods:

//获取当前点击用户的权限列表

            editJurisdictionse(id){

                var admin_user = id; // 用户id

                this.user_id = id; 

                this.menu_ide = [] // 绑定的权限数组获取之前清空，防止出现权限 包含了 查看上一个用户的权限列表

               后端提供的接口api (admin_user).then(res=>{

                    //获取当前用户拥有的权限列表

                    this.menu_ids = res.data.menus //后端返回的查看当前用户的权限列表

                    // menu_idss = 权限数组  menu_ids = 当前用户拥有的权限 menu_ide=绑定的权限数组

                    for(var i=0;i<this.menu_idss.length;i++){ //便利本身拥有的数组

                        for(var j=0;j<this.menu_ids.length;j++){ //便利权限中转站

                            if(this.menu_idss[i].id == this.menu_ids[j].id){ //判断权限是否相同

                                this.menu_ide.push(this.menu_ids[j].title) // 相同存进 绑定的权限数组里

                            }

                        }

                    }

                }).catch(()=>{

                    this.$message.error("获取权限列表失败")

                })

            },