Java Spring Boot + Vue 实习项目9：对话框选权限

1. 显示权限对话框
1.1 使用Element UI的对话框，其中的visible.sync属性为一个自定义的boolean类型量，表示对话框是否显示。
<el-dialog title="用户权限" :visible.sync="dialogFormVisible"></el-dialog>
dialogFormVisible: false, //对话框是否显示   这是data(){}中的数据
1.2 使用Element UI的复选框，每一个大类使用一组复选框，每个框代表一个权限，用v-for循环实现。
<el-checkbox-group v-model="menuIdList">
    <el-checkbox style="margin: 5px;" v-for="subMenu in menu.subMenus" :key="subMenu.menuId" :label="subMenu.menuId">{{subMenu.menuName}}</el-checkbox>
</el-checkbox-group>
1.3 定义一个打开权限窗口的方法，从后端获取用户ID对应的权限编号后将窗口打开。
openModuleDialog(data){
            this.$myGet('security/module/' + data.u_id)
            .then((data)=>{
                this.menuIdList = data; //获得用户的权限编号
                this.dialogFormVisible = true; //打开窗口
            })
        }
1.4 后端向前端提供数据库中的权限列表。
2. 显示对话框中的默认选中的权限
2.1 对话框中默认的权限即为数据库中的当前值，前端获取到对应用户的权限列表后，将复选框中的对应选项选中。
menuIdList: [], //选中的权限值
this.menuIdList = data; //获得用户的权限编号