2020 零基础到快速开发 Vue全家桶开发电商管理系统（Element-UI）【分配角色】

1、引言

寒假是用来反超的！一起来学习Vue把，这篇博客是关于分配角色，请多指教~

2、分配角色

2.1 渲染分配角色的对话框并请求角色列表数据

 		<!-- 分配角色的对话框 -->
        <el-dialog
        title="分配角色"
        :visible.sync="setRoleDialogVisible"
        width="50%"
        >
        <div>
            <p>当前用户：{{userInfo.username}}</p>
            <p>当前角色：{{userInfo.role_name}}</p>
            {{rolesList}}
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="setRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setRoleDialogVisible = false">确 定</el-button>
        </span>

		 // 展示分配角色的对话框
        async setRole(userInfo){
            this.userInfo = userInfo
            
            // 在展示对话框之前，获取所有角色列表
            const {data:res} = await this.$http.get('roles')
            if(res.meta.status !== 200) return this.$message.error('获取角色列表失败！')
            this.rolesList = res.data

            this.setRoleDialogVisible = true
        }

2. 2 渲染角色列表的select下拉菜单

		<div>
            <p>当前用户：{{userInfo.username}}</p>
            <p>当前角色：{{userInfo.role_name}}</p>
            <p>分配新角色：
                <el-select v-model="selectedRoleId" placeholder="请选择">
                <el-option
                    v-for="item in rolesList"
                    :key="item.id"
                    :label="item.roleName"
                    :value="item.id">
                </el-option>
                </el-select>
            </p>
        </div>

2.3 完成分配角色的功能

		 // 点击确定按钮，为用户分配角色
        async saveRoleInfo(){
            if(!this.selectedRoleId) return this.$message.error('请选择要分配的角色')
            const {data:res} = await this.$http.put('users/' + this.userInfo.id +'/role',{rid:this.selectedRoleId})
            if(res.meta.status !== 200) return this.$message.error('更新角色失败！')
            this.$message.success('更新角色成功!')
            // 更新用户列表
            this.getUserList()
            // 隐藏更新角色对话框
            this.setRoleDialogVisible = false
        },
        // 监听分配角色对话框关闭事件
        setRoleDialogClosed(){
            this.selectedRoleId= ''
            this.userInfo = {}
        }

3、结束语

至此，我们的功能就完成了！

Vue全家桶开发电商管理系统码云地址，欢迎一起来学习~

https://gitee.com/Chocolate666/vue_shop

---

最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~

点击进入Vue❤学习专栏~

学如逆水行舟，不进则退