vue查询列表中所有用户信息_Vue + ElementUI的电商管理系统实例10 用户列表-分配角色...

//展示分配用户角色的对话框

setRole(userInfo) {this.setRoleDialogVisible = true}

添加分配角色的对话框：

当前的用户：{ {userInfo.username}}

当前的角色：{ {userInfo.role_name}}

取 消

确 定

data() {return{

setRoleDialogVisible:false,//控制分配用户角色的对话框是否显示

setRoleDialogVisible:false,//控制分配用户角色的对话框是否显示

//需要被分配角色的用户信息

userInfo: {}

}

},

methods: {//展示分配用户角色的对话框

setRole(userInfo) {//console.log(userInfo)

this.userInfo=userInfothis.setRoleDialogVisible= true}

}

}

此时点击分配角色按钮，效果如图：

然后要获取所有角色列表，并传递到rolesList数组中：

rolesList: [] //所有角色列表数组

//展示分配用户角色的对话框

async setRole(userInfo) {//console.log(userInfo)

this.userInfo =userInfo//在展示对话框之前&#x