1. 问题描述

需求：在使用ElementUI时，通过el-select和el-option标签实现下拉列表功能，当el-option中的选项被选中时，被选中的选项可以正确回显到已选择的列表中。

对于上面的下拉列表，当我们选中“超级管理员”的选项时，该选项应该和“友链审核员”同处于已选中的列表中，但是该现象并没有发生。同时提交数据时，却能将“超级管理员”被选中的数据提交，本文解决此问题。

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. 问题解决

使用上面代码无法解决el-select与el-option无法通过v-model实现数据双向绑定的问题，因为在handleUpdate方法中，this.form.roleIds的变化并没有Vue.js检测到，需要通过this.$set来手动触发数据的变化检测。

/** 修改按钮操作 */
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 = '修改用户'
  })
},