Vue用户管理模块(权限分配)

分配角色对话框

 <el-tooltip
              effect="dark"
              placement="top"
              content="分配角色"
              :enterable="false"
            >
              <el-button
                type="warning"
                icon="el-icon-setting"
                size="mini"
                @click="showRoleDialog(scope.row)"
              ></el-button>
            </el-tooltip>

 <!--分配角色对话框-->
    <el-dialog
      title="分配角色"
      :visible.sync="roleDialogVisible"
      width="50%"
      @close="setRoleDialogClosed"
    >
    <div>
        <p>当前用户：{{userInfo.username}}</p>
        <p>当前角色：{{userInfo.role_name}}</p>
    </div>
      

      <span slot="footer" class="dialog-footer">
        <el-button @click="roleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="allotRole">确 定</el-button>
      </span>
    </el-dialog>

// 分配角色对话框显示和隐藏
      roleDialogVisible:false,
      userInfo:{},
      // 角色列表
      rolesList:[],

//显示分配角色对话框
    showRoleDialog(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.roleDialogVisible=true
    },
    // 监听分配角色对话框的关闭事件
    setRoleDialogClosed(){
       
    },
    // 分配角色
    allotRole(){

    }

elementui select

<!-- 分配新的角色： -->
          <el-select v-model="selectedRoleId" placeholder="请选择">
              <!-- label 展示文本 :value表示获取到的值 = selectedRoleId-->
            <el-option
              v-for="item in rolesList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            >
            </el-option>
          </el-select>

//显示分配角色对话框
    async showRoleDialog(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.roleDialogVisible = true;
    },
    // 监听分配角色对话框的关闭事件
    setRoleDialogClosed() {},
    // 分配角色
    async allotRole() {
        // 判断是否选择了角色
        if(!this.selectedRoleId){
            return this.$message.error('请选择角色!')
        }
        const {data:res} = await this.$http.put(`users/${this.userInfo.id}/role`,{rid:this.selectedRoleId})
        console.log(res)
        if(res.meta.status !== 200){
            return this.$message.error('更新角色失败')
        }
        this.$message.success('更新角色成功!')
        this.getUserList()
        this.roleDialogVisible=false
    },

// 监听分配角色对话框的关闭事件
    setRoleDialogClosed() {
        this.selectedRoleId=null
        this.userInfo={}
    },

细节优化
分页离上方表格太近，由于在很多地方都用到，可以设置全局样式
global.css

.el-pagination {
    margin-top: 15px;
}

vs-code 格式化的时候单引号会自动变成双引号,代码结构看的不方便
根目录下新建文件 文件名为.prettierrc 这个文件是可以自动识别的

{
    //不需要分号结尾
    "semi":false,
    // 使用单引号
    "singleQuote":true,
    每一行宽度
    "printWidth":200,
}