ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
1. 实现效果举例 ![](https://box.kancloud.cn/e55d6ef284606188d35bdb40553a5375_1916x578.png) 2. 前端实现 * 先导入mapGetters ``` import { mapGetters } from "vuex"; ``` * 引入关键信息配置 ``` export default { computed: { ...mapGetters(["permissions"]) }, created() { this.sys_user_add = this.permissions["sys_user_add"]; this.sys_user_upd = this.permissions["sys_user_upd"]; this.sys_user_del = this.permissions["sys_user_del"]; } } ``` * 代码中定义按钮 ``` <div style="height: 35px;"> <el-button-group> <el-button size="small" v-if="sys_user_add" @click="handleCreate" icon="el-icon-circle-plus-outline">新增</el-button> <el-button v-if="sys_user_upd" size="small" icon="el-icon-edit" @click="handleUpdate">编辑</el-button> </el-button-group> </div> ``` 属性域【v-if】是实现对其按钮创建与不创建的控制。 值域【sys_user_add】是在页面加载的时候,就自动获取(登录逻辑中以根据权限配置获取)该用户的操作权限列表。 3. 功能配置 ![](https://box.kancloud.cn/77c375f8d6eb47b7e4b83491321914cf_959x720.png) 图中的权限表示:sys_user_add 就是作为“新增用户”的操作权限控制标识,该配置必须与代码中的按钮控制标识一致才能起到控制的作用。 4. 对应的数据库字段。 ![](https://box.kancloud.cn/8b659096a189e9ee585cbe6c23341f0b_623x680.png) 5. 应用举例 ms-ui : /src/views/admin/user/index.vue