【element-ui】el-select multiple多选,表单校验问题解决方法

在项目开发过程中发现,el-select设置了multiple支持多选属性之后,el-select赋值之后,表单校验不通过

解决思路及解决方法:

1、首先看看v-model 、prop属性、rules校验是否正确,这里注意el-select的rules校验的trigger应该是change。

如果以上都没问题,那么还有一个原因就是:嵌套太深,导致form检测不到ruleForm的变化

自定义校验方法:

2、添加form表单:rule方式验证,并且给下拉框添加change函数

<el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-bottom: 20px"><el-row><el-col :span="12"><el-form-item label="接收人" prop="receivers"><el-select v-model="form.receivers" placeholder="请选择接收人" filterable multiple clearable style="width: 100%" :disabled="this.disabled"@change='vulTypeChange'><el-option v-for="item in users" :key="item.userName" :label="item.nickName" :value="item.userName" /></el-select></el-form-item></el-col></el-row></el-form>
rules: {receivers: [{ required: true, validator: picValidator, trigger: 'change' },]}

注意rule中验证方式应该是“change”  @change="vulTypeChange()"

vulTypeChange() {this.form = { ...this.form }},

3、自定义校验方法:

data() {// 自定义验证规则var picValidator = (rule, value, callback) => {if (!this.form.receivers.length) {// 一定要写 callBack() 验证完成时调用的回调函数 https://github.com/yiminghe/async-validatorcallback(new Error('请至少选择一个接收人'))} else {callback()}}

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

具身智能计算系统,机器人时代的 Android | 新程序员

【导读】具身智能作为一种新兴的研究视角和方法论&#xff0c;正在刷新我们对智能本质及其发展的理解&#xff1a;传统的 AI 模型往往将智能视为一种独立于实体存在的抽象能力&#xff0c;而具身智能则主张智能是实体与其环境持续互动的结果。 本文深度剖析了具身智能计算系统…

第二篇【传奇开心果系列】Python的自动化办公库技术点案例示例:深度解读Pandas金融数据分析

传奇开心果博文系列 系列博文目录Python的自动化办公库技术点案例示例系列 博文目录前言一、Pandas 在金融数据分析中的常见用途和功能介绍二、金融数据清洗和准备示例代码三、金融数据索引和选择示例代码四、金融数据时间序列分析示例代码五、金融数据可视化示例代码六、金融数…

Linux设备模型(十) - bus/device/device_driver/class

四&#xff0c;驱动的注册 1&#xff0c;struct device_driver结构体 /** * struct device_driver - The basic device driver structure * name: Name of the device driver. * bus: The bus which the device of this driver belongs to. * owner: The module own…

uniapp开发android原生插件

一、下载原生开发SDK Android 离线SDK - 正式版 | uni小程序SDK (dcloud.net.cn)、 https://nativesupport.dcloud.net.cn/AppDocs/download/android.html 将开发uniappa原生android的插件解压到ben本地目录&#xff0c;目录结构如下&#xff1a; 接下就可以使用 UniPlugin-Hel…

第三百八十回

文章目录 1. 概念介绍2. 使用方法3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 013pickers2.gif 我们在上一章回中介绍了"如何实现Numberpicker"相关的内容&#xff0c;本章回中将介绍wheelChoose组件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念…

蓝桥杯练习题——差分

1.空调 思路 1.区间同时加减 1&#xff0c;可以转换成一个差分数组两个端点的操作 2.用 p 减去 t 数组&#xff0c;得到要消除的数组 a&#xff0c;对 a 求差分数组 3.差分数组一正一负为一个操作&#xff0c;因为是把这个原数组区间加上了 1&#xff0c;单独的正负为一个操作…

Python把excel内容保存为图片(非统计图而是纯原表格数据)

一、引入 excel2img 库&#xff0c;没有的话使用 pip install excel2img进行安装 二、采用如下方法进行图片生成 excel文件名为&#xff1a;111.xlsx excel表格里面的sheet名称列表为 [Sheet1, Sheet2] 最终保存为以sheet名称.png的图片 支持跨表格合并项 import excel2i…

《手把手教你》系列技巧篇(十五)-java+ selenium自动化测试-元素定位大法之By xpath中卷(详细教程)

1.简介 按宏哥计划&#xff0c;本文继续介绍WebDriver关于元素定位大法&#xff0c;这篇介绍定位倒数二个方法&#xff1a;By xpath。xpath 的定位方法&#xff0c; 非常强大。 使用这种方法几乎可以定位到页面上的任意元素。 2.什么是xpath&#xff1f; xpath 是XML Path的…

Win11系统实现adb命令向安卓子系统安装APP

Win11系统实现通过adb命令向安卓子系统安装已下载好的apk包。 要实现以上目标&#xff0c;我们需要用到一个Android SDK 的组件Android SDK Platform-Tools &#xff01;这个组件呢其实是被包含在 Android Studio中的&#xff0c;如果你对安卓开发有所了解对此应该不会陌生&…

超全面!Linux学习资料大合集,21套从入门到进阶,看这篇就够了

本文将为那些渴望学习Linux&#xff0c;但又缺乏相应资料和方向的朋友&#xff0c;提供21套Linux优质资料&#xff0c;包含入门到进阶&#xff0c;希望能对大家有所帮助。 此合集内容及其丰富&#xff0c;涉及方面颇多&#xff0c;不仅适合Linux入门学习的朋友&#xff0c;运维…

Linux(CentOS)学习

一、认识Linux 1、如何修改Linux时区 2、配置固定IP 3、重启网络服务 3、小技巧快捷键 4、环境变量设置 5、Linux文件的上传和下载 6、压缩和解压 二、基础命令 1、目录命令 (1、)查看目录内容&#xff08;ls&#xff09; 1、ls //查看当前目录内容 2、- a //显示隐藏内容 3…

Web自动化测试平台开发---Automated_platform

一、项目简介 历时一个假期&#xff0c;Automated_platform 第一版完工&#xff0c;是一款基于po模式的自动化测试平台,采用后端技术为DjangoceleryRabbitMQmysql 配置mysql数据库&#xff0c;进行数据迁移后&#xff0c;运行项目后&#xff0c;即可成功访问http://127.0.0.1:8…

【王道操作系统】ch1计算机系统概述-05操作系统引导

文章目录 【王道操作系统】ch1计算机系统概述-05操作系统引导01 什么是操作系统引导02 磁盘里边有哪些相关数据&#xff08;1&#xff09;主引导记录&#xff08;MBR&#xff09;&#xff08;2&#xff09;活动分区&#xff08;一般是C盘&#xff09; 03 操作系统引导的过程 【…

中间件-Nginx加固(控制超时时间限制客户端下载速度并发连接数)

中间件-Nginx加固&#xff08;控制超时时间&限制客户端下载速度&并发连接数&#xff09; 1.1 Nginx 控制超时时间配置1.2 Nginx 限制客户端下载速度&并发连接数 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 1.1 Nginx 控制超…

Arduino应用开发——使用GUI-Guider制作LVGL UI并导入ESP32运行

Arduino应用开发——使用GUI-Guider制作LVGL UI并导入ESP32运行 目录 Arduino应用开发——使用GUI-Guider制作LVGL UI并导入ESP32运行前言1 使用GUI-Guider设计UI1.1 创建工程1.2 设计UI 2 ESP工程导入UI2.1 移植LVGL2.2 移植UI文件2.3 调用UI文件2.4 烧录测试 结束语 前言 GU…

Spring 日志

在Java程序中的日志&#xff0c;想必我们已经不陌生了吧&#xff01;对于控制台System.out.println();输出的每个程序都可以看作成日志&#xff01; 但是&#xff0c;相比于真正意义上的日志还是有很大区别的&#xff01; 上述每个红框框所标注的都是真正日志的组成数据&#…

redis运维

1.备份redis配置文件 cp /etc/redis.conf /etc/redis.conf.bak 2.将redis中不要的注释和空行删除 sed -i /^#/d; /^$/d /etc/redis.conf 3.redis配置文件 bing 0.0.0.0 &#xff1a;绑定本机所有网卡 daemonize yes&#xff1a;设置后台运行 requirepass redispwd…

【本科组冠名奖】2023年第八届数维杯数学建模挑战赛获奖感言

美国大学生数学建模竞赛已结束过半&#xff0c;现在又迎来了2024年第九届数维杯国赛&#xff0c;准备参加今年数维杯国赛的同学&#xff0c;今天我们一起看看去年优秀的选手都有什么获奖感言吧~希望能帮到更多热爱数学建模的同学。据说文末在看点赞的大佬都会直冲国奖呢&#x…

C++ //练习 10.31 修改前一题的程序,使其只打印不重复的元素。你的程序应使用unique_copy(参见10.4.1节,第359页)。

C Primer&#xff08;第5版&#xff09; 练习 10.31 练习 10.31 修改前一题的程序&#xff0c;使其只打印不重复的元素。你的程序应使用unique_copy&#xff08;参见10.4.1节&#xff0c;第359页&#xff09;。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09…

STM32 (1)

1.基本信息 stm32是由ST公司生产的一种32位微控制器&#xff08;单片机&#xff09;。 1.1 各种型号 stm32是32位单片机的总称&#xff0c;有多种不同的系列。 32即用32个比特位表示一个地址&#xff0c;寻址范围&#xff1a;0x00000000 --0xffffffff (4GB) 1.2 存储密度 …