修复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 = '修改用户'
  })
},
相关推荐
阿芯爱编程4 小时前
2025前端面试题
前端·面试
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
晓13135 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo6 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴6 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
军军君016 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
chao_7897 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼7 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原8 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf8 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js