修复ElementUI中el-select与el-option无法通过v-model实现数据双向绑定的问题

1. 问题描述

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

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

2. 代码示例

2.1 ui代码

html 复制代码
<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代码

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-selectel-option无法通过v-model实现数据双向绑定的问题,因为在handleUpdate方法中,this.form.roleIds的变化并没有Vue.js检测到,需要通过this.$set来手动触发数据的变化检测。

js 复制代码
/** 修改按钮操作 */
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 = '修改用户'
  })
},
相关推荐
LuciferHuang4 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing4 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20154 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言5 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手5 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言5 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友7 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手7 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿7 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉