修复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 = '修改用户'
  })
},
相关推荐
Felicity_Gao1 小时前
uni-app VOD 与 COS 选型、开发笔记
前端·笔记·uni-app
我狸才不是赔钱货2 小时前
前端技术栈全景图:从HTML到现代框架的演进之路
前端·html
百花~3 小时前
前端三剑客之一 HTML~
前端·html
lang201509283 小时前
Spring远程调用与Web服务全解析
java·前端·spring
Sheldon一蓑烟雨任平生4 小时前
Vue3 依赖注入(provide 和 inject)
vue.js·inject·provide·vue3 依赖注入·跨级别组件通信
listhi5205 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
paopaokaka_luck5 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
一点一木6 小时前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
华仔啊6 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
非凡ghost6 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求