Vue_shop学习81：完成前面用户管理的用户列表的分配角色按钮-弹出显示

控制弹出对话框

  setRole(){
                this.setDialogVisible=true//点击分配角色按钮框的操作
            }

 setDialogVisible:false,//分配角色按钮框显示与隐藏

                        <!-- 分配角色按钮 -->
                        <el-tooltip effect="dark" content="分配角色" placement="top"
                            :enterable="false">
                            <el-button type="warning" icon="el-icon-setting"
                                size="mini" @click="setRole"></el-button>
                        </el-tooltip>

        <!-- 分配角色 的对话框-->
        <el-dialog
            title="分配角色"
            :visible.sync="setDialogVisible"
            width="50%">
            <!-- 内容主题区域 -->
            <span>你好</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="setDialogVisible= false">取 消</el-button>
                <el-button type="primary" @click="setDialogVisible=false">确 定</el-button>
            </span>
        </el-dialog>

---

---

加载当前用户的基本信息：

  userInfo:{},//获取当前行的用户信息

            setRole(userInfo){
                //获取当前用户信息
                this.userInfo=userInfo
                this.setDialogVisible=true//点击分配角色按钮框的操作
            }

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

 效果

---

设置下拉菜单，控制新的角色分配

在展示对话框的时候获取所有角色列表

      roleList:{},//角色信息

            async setRole(userInfo){
                //获取当前用户信息
                this.userInfo=userInfo
                //在展示对话框的时候获取所有角色列表
                const {data:res}=await this.$http.get('roles')
                if(rea.meta.status!==200){
                    return this.$message.error('获取角色列表失败')
                }
                //将角色列表数据保存
                this.roleList=res.data
              

            this.setDialogVisible=true//点击分配角色按钮框的操作
            }

渲染到页面中成为下拉菜单：

组件 | Element

v -model将用户绑定的数据双向绑定  placeholder 默认展示的文本占位符

里面的选项通过手动for循环自动生成  :labe你看到的名称 ：value你真正选择的值\

            <!-- 内容主题区域 -->
            <div>
                <p>当前的用户：{{userInfo.username}}</p>
                <p>当前的角色：{{userInfo.role_name}}</p>
                <p>分配新角色:
                    <template>
                        <!-- v-model将用户绑定的数据双向绑定  placeholder 默认展示的文本占位符-->
                        <el-select v-model="selsetRoleId" placeholder="请选择">
                            <!-- 里面的选项通过手动for循环自动生成
                            :labe你看到的名称 ：value你真正选择的值 -->
                          <el-option
                            v-for="item in roleList"
                            :key="item.id"
                            :label="item.roleName"
                            :value="item.id">
                          </el-option>
                        </el-select>
                      </template>
                </p>
            </div>

  async setRole(userInfo){
                //获取当前用户信息
                this.userInfo=userInfo
                //在展示对话框的时候获取所有角色列表
                const {data:res}=await this.$http.get('roles')
                if(res.meta.status!==200){
                    return this.$message.error('获取角色列表失败')
                }
                //将角色列表数据保存
                this.roleList=res.data
                console.log(res.data)

                this.setDialogVisible=true//点击分配角色按钮框的操作
            }

            async setRole(userInfo){
                //获取当前用户信息
                this.userInfo=userInfo
                //在展示对话框的时候获取所有角色列表
                const {data:res}=await this.$http.get('roles')
                if(res.meta.status!==200){
                    return this.$message.error('获取角色列表失败')
                }
                //将角色列表数据保存
                this.roleList=res.data
                

                this.setDialogVisible=true//点击分配角色按钮框的操作
            }