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

1. 问题描述

需求:在使用ElementUI时,通过el-selectel-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-selectel-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 = '修改用户'
  })
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/460186.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Tomcat的使用

1. Tomcat 1.1 Tomcat 是什么 Tomcat 就是基于 Java 实现的一个开源免费, 也是被广泛使用的 HTTP 服务器 1.2 下载安装 Tomcat官网选择其中的 zip 压缩包, 下载后解压缩即可&#xff0c;解压缩的目录最好不要带 “中文” 或者 特殊符号 进入 webapps 目录,每个文件夹都对应…

vue3项目随笔1

1,Eslint Prettier 报错情况&#xff1a; 解决办法&#xff1a; &#xff08;1&#xff09;下载Prettier - code formatter &#xff08;2&#xff09;配置setting.json文件 文件 -> 首选项 -> 设置 -> 用户 -> Eslint "editor.defaultFormatter":…

【Hadoop】Hadoop概述与核心组件

目录 Hadoop概述Hadoop 发展历史Hadoop 三大发行版本1.Apache Hadoop&#xff08;常用&#xff09;2.Cloudera Hadoop3.Hortonworks Hadoop优势优势总结——4高&#xff08;高可靠、高扩展、高效、高容错&#xff09; Hadoop组成1.HDFS管理者&#xff1a;NameNode&#xff08;n…

【计算机网络_传输层】UDP和TCP协议

文章目录 1. 重新理解端口号端口号划分netstat指令pidof 2. UDP协议2.1 UDP协议端格式2.2 UDP的特点2.3 UDP的注意事项2.4 基于UDP的应用层协议 3. TCP协议&#xff08;传输控制协议&#xff09;3.1 TCP协议的格式和报头字段3.2 如何解包和分用3.3 理解TCP协议报头3.4 TCP协议的…

解决electron打包vue-element-admin项目页面无法跳转的问题

解决electron打包vue-element-admin项目页面无法跳转的问题 说明之前通过这个教程已经打包成功&#xff0c;但是发现进行账号密码登录后页面无法跳转的问题。现在已经解决&#xff0c;所以记录一下。 1、检查路由模式是否为hash模式&#xff0c;如果不是改成hash模式。 new Ro…

【DL经典回顾】激活函数大汇总(十五)(LogSoftmax附代码和详细公式)

激活函数大汇总&#xff08;十五&#xff09;&#xff08;LogSoftmax附代码和详细公式&#xff09; 更多激活函数见激活函数大汇总列表 一、引言 欢迎来到我们深入探索神经网络核心组成部分——激活函数的系列博客。在人工智能的世界里&#xff0c;激活函数扮演着不可或缺的…

【矩阵】54. 螺旋矩阵【中等】

螺旋矩阵 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[1,2,3,6,9,8,7,4,5] 解题思路 1、模拟顺时针螺旋顺序遍历矩阵…

R语言语法基础(说人话版)

在Rstudio中使用ctrl回车来执行某一行的代码 在R语言中&#xff0c;通常不需要像C语言一样在每条语句的结尾添加分号来表示语句结束。R语言是一种脚本语言&#xff0c;它使用换行符来分隔语句&#xff0c;因此分号通常是可选的&#xff0c;除非你想在同一行上写多个语句。在R中…

Selenium 自动化 —— 使用WebDriverManager自动下载驱动

上一篇文章 入门和 Hello World 实例 中&#xff0c;我们提供了一个最简单的 Selenium 上手的例子。 但是某一天&#xff0c;突然发现相同的代码居然运行报错了。这是怎么回事呢&#xff1f; 日志排查 日志中其实提示的很明显了&#xff1a;Chrome浏览器和Chrome WebDriver的…

【PTA】L1-039 古风排版(C++)

题目链接&#xff1a;L1-039 古风排版 - 团体程序设计天梯赛-练习集 (pintia.cn) 目录&#xff1a; 目录&#xff1a; 题目要求&#xff1a; 输入格式&#xff1a; 输出格式&#xff1a; 输入样例&#xff1a; 输出样例&#xff1a; 思路&#xff1a; 代码&#xff1a; 测试结…

B. Array Fix

思路&#xff1a;我们倒着看&#xff0c;首先判断以下当前元素有没有被操作过&#xff0c;被操作过的话&#xff0c;那么需要改为操作后的数&#xff0c;然后跟当前数的前一个数进行比较&#xff0c;如果a[i] < a[i - 1]的话&#xff0c;那么需要将a[i - 1]拆分&#xff0c;…

(二)丶RabbitMQ的六大核心

一丶什么是MQ Message Queue(消息队列&#xff09;简称MQ&#xff0c;是一种应用程序对应用程序的消息通信机制。在MQ中&#xff0c;消息以队列形式存储&#xff0c;以便于异步传输&#xff0c;在MQ中&#xff0c;发布者&#xff08;生产者&#xff09;将消息放入队列&#xff…

基于HSV色度空间的图像深度信息提取算法FPGA实现,包含testbench和MATLAB辅助验证程序

目录 1.算法运行效果图预览 ​编辑2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 将FPGA结果导入到matlab显示结果如下&#xff1a; matlab的对比测试结果如下&#xff1a; 2.算法运行软件版本 vivado2019.2 matlab2022a…

C++提高笔记(四)---STL容器(stack、queue、list)

1、stack容器&#xff08;栈&#xff09; 1.1 栈stack基本概念 概念&#xff1a;stack是一种先进后出&#xff08;First In Last Out&#xff0c;FILO&#xff09;的数据结构&#xff0c;它只有一个出口 栈中只有顶端的元素才可以被外界调用&#xff0c;因此栈不允许有遍历行…

Java八股文(Element Plus)

Java八股文のElement Plus Element Plus Element Plus 什么是Element UI 和 Element Plus&#xff1f; Element UI 和 Element Plus 是基于 Vue.js 的一套非常受欢迎的开源 UI 组件库&#xff0c;用于快速构建具有现代化设计和丰富交互效果的前端界面。 Element UI 和 Element…

【C#】int+null=null

C#语法&#xff0c;这玩意不报错 intnullnull&#xff0c;有点不合逻辑 (Int32)(bizRepair0rder.CreateTime. Value - regues.Mlodifylime.Value).TotalMinutes (Int32)(bizRepair0rder.CreateTime. Value - reques.llodifylime.Value).TotalMinutes nullstring是引用类型&…

Kotlin:runBlocking导致App应用出现ANR问题实例

runBlocking简介 runBlocking 是常规函数&#xff1b; runBlocking 方法会阻塞当前线程来等待&#xff1b; runBlocking 的主线程会一直 阻塞 直到 runBlocking 内部的协程执行完毕。 runBlocking导致App应用出现ANR问题实例的效果 点击页面上的 刷新按钮 调用 refreshByrunBlo…

IDEA中的打包Build Artifacts详解

现在大家是不是很少遇见自己打包部署项目了&#xff0c;因为现在都是自动化部署&#xff0c;所以基本大的公司都没有了这一步。当项目开发完毕&#xff0c;需要对外发布时&#xff0c;我们就会用到IDEABuild Artifacts功能&#xff0c;那么如果在idea中打包呢。 在没有创建Arti…

金蝶云星空,怎么做BI数据可视化分析?

金蝶云星空是一个流程管理方面的软件&#xff0c;如果想要做BI数据可视化分析&#xff0c;还就需要一套BI方案&#xff0c;即一套奥威BI软件金蝶云星空BI方案。 奥威BI软件&#xff0c;负责提供平台和技术&#xff1b;金蝶云星空BI方案&#xff0c;则提供标准化的数据分析模型…

自动化脚本-图片验证码识别登陆

安装依赖包 pip install requests requests 模块是 Python 中一个常用的 HTTP 库&#xff0c;用于发送 HTTP 请求和处理 HTTP 响应。它提供了简洁而友好的 API&#xff0c;使得在 Python 中进行 HTTP 请求变得十分方便&#xff08;本文用于进行验证码下载&#xff09; pip ins…