1. 问题描述
2. 代码示例
2.1 ui代码
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="24">
<el-form-item label="角色">
<el-select v-model="form.roleIds" multiple placeholder="请选择">
<el-option
v-for="item in roleOptions"
:key="item.id"
:label="item.roleName"
:value="item.id"
:disabled="item.status === 1"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog>
2.2 js代码
export default {
data() {
return {
}
},
methods: {
reset() {
this.form = {
id: undefined,
userName: undefined,
nickName: undefined,
password: undefined,
phonenumber: undefined,
email: undefined,
sex: undefined,
status: '0',
remark: undefined,
roleIds: []
}
this.resetForm('form')
},
handleUpdate(row) {
this.reset()
const id = row.id || this.ids
getUser(id).then((response) => {
this.form = response.user
this.roleOptions = response.roles
this.form.roleIds = response.roleIds
this.open = true
this.title = '修改用户'
})
},
submitForm: function() {
this.$refs['form'].validate((valid) => {
if (valid) {
if (this.form.id !== undefined) {
updateUser(this.form).then((response) => {
this.$modal.msgSuccess('修改成功')
this.open = false
})
}
}
})
}
}
}
3. 问题解决
handleUpdate(row) {
this.reset()
const id = row.id || this.ids
getUser(id).then((response) => {
this.form = response.user
this.roleOptions = response.roles
this.$set(this.form, 'roleIds', response.roleIds)
this.open = true
this.title = '修改用户'
})
},