【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.mzph.cn/news/708659.shtml

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

相关文章

【Go语言】Go语言中的指针

Go语言中的指针 变量的本质是对一块内存空间的命名&#xff0c;我们可以通过引用变量名来使用这块内存空间存储的值&#xff0c;而指针则是用来指向这些变量值所在内存地址的值。 注&#xff1a;变量值所在内存地址的值不等于该内存地址存储的变量值。 Go语言中&#xff0c;…

42.do...while语句

目录 一.什么是do...while语句 二.语法 三.执行流程图 四.举例 五.视频教程 一.什么是do...while语句 do...while语句也是循环语句&#xff0c;和while语句的区别是&#xff0c;while语句是先判断表达式&#xff0c;如果表达式成立才会执行循环体中的内容&#xff0c;否则…

新书速览|Python数据分析快速上手

从零开始&#xff0c;小白轻松入手&#xff0c;一步一步教你学数据分析&#xff0c;让数据分析变得简单易懂 本书内容 《Python数据分析快速上手》通过通俗易懂的语言、丰富多彩的实例&#xff0c;详细介绍了使用Python进行数据分析应该掌握的各方面技术。本书内容包括Python基…

区块链游戏解说:什么是 Arcade Champion

作者&#xff1a;lesleyfootprint.network 编译&#xff1a;cicifootprint.network 数据源&#xff1a;Arcade Champion Dashboard 什么是 Arcade Champion Arcade Champion 代表了移动游戏世界的重大革新。它将经典街机游戏的怀旧与创新元素结合在一起&#xff0c;包括 NF…

自学Python笔记总结(2——了解)

网络了解 网络调试助手 NetAssist.exe NetAssist.exe 使用方法请自行寻找 UDP协议 &#xff08;只能一来一回的的发消息&#xff0c;不可连续发送&#xff09; UDP 是User Datagram Protocol的简称&#xff0c; 中文名是用户数据报协议。在通信开始之前&#xff0c;不需要建…

计算机网络体系结构

本篇博客是基于谢希仁编写的《计算机网络》和王道考研视频总结出来的知识点&#xff0c;本篇总结的主要知识点是第一章的计算机网络概述。 计算机网络概述 整体介绍 概念 计算机网络&#xff1a;是一个将分散的。具有独立功能的计算机系统&#xff0c;通过通信设备和线路连…

Zookeeper基础入门-1【集群搭建】

Zookeeper基础入门-1【集群搭建】 一、Zookeeper 入门1.1.概述1.2.Zookeeper工作机制1.3.Zookeeper特点1.4.数据结构1.5.应用场景1.5.1.统一命名服务1.5.2.统一配置管理1.5.3.统一集群管理1.5.4.服务器动态上下线1.5.5.软负载均衡 1.6.Zookeeper官网1.6.1.Zookeeper下载1.6.2.历…

day01-HTML-CSS

一、Web 开发 1. 什么是 Web &#xff1f; Web&#xff1a;全球广域网&#xff0c;也称为万维网(www&#xff0c;World Wide Web)&#xff0c;能够通过浏览器访问的 网站。 2. Web 网站的开发模式 3. Web 标准 Web 标准也称为网页标准&#xff0c;由一系列的标准组成&#xff…

REVERSE-COMPETITION-VNCTF-2024

REVERSE-COMPETITION-VNCTF-2024 前言TBXObaby_c2yunobfuseko 前言 ko的随机数算法没看出来&#xff0c;可惜~ 这里给自己打个广告&#xff1a;东南网安研二在读&#xff0c;求实习&#xff0c;求内推&#xff0c;求老板们多看看我QAQ TBXO 通过字符串定位到main函数汇编视…

【Algorithms 4】算法(第4版)学习笔记 13 - 番外篇:二叉查找树的几何应用(下篇)

文章目录 前言参考目录学习笔记4&#xff1a;区间搜索树&#xff08;interval search trees&#xff09;4.1&#xff1a;一维区间搜索4.2&#xff1a;区间搜索树定义4.3&#xff1a;区间搜索树 demo 演示4.3.1&#xff1a;插入4.3.2&#xff1a;搜索命中4.3.3&#xff1a;搜索未…

[RCTF2015]EasySQL1 题目分析与详解

一、题目介绍&#xff1a; 1、题目来源&#xff1a; BUUCTF网址 2、题目介绍&#xff1a; 拿到flag。 二、解题思路&#xff1a; 我们发现题目首页有登录和注册账号两个选项&#xff0c;我们首先尝试注册账号&#xff0c;尝试注册username为admin的账号&#xff0c;输入密码…

如何更改虚拟机服务端口

如何更改虚拟机服务端口 背景internet information services开启/安装 IIS打开IIS管理器 修改端口 背景 今天我们来讲一下如何更改我们服务所占用的端口号&#xff0c;假设我们在虚拟机或者本地计算机上部署了一个服务&#xff0c;然后这个服务呢&#xff0c;我们默认安装了&a…

一番赏小程序开发,提升用户体量,增加收益

随着我国年轻人逐渐成为消费主力军&#xff0c;盲盒一番赏迅速迎来高速发展期&#xff0c;一番赏的市场规模也迅速扩大。 在互联网的支持下&#xff0c;当下国内形成了线上消费热潮&#xff0c; 一番赏开启了线上抽赏&#xff0c;衍生出了线上一番赏小程序&#xff0c;这让更多…

快速掌握MySql的常用基本操作

MySql 基本操作 一、MySql的数据类型二、MySql运算符三、MySql常用函数四、MySql完整性约束五、MySql核心操作&#xff08;库、表、CRUD、连接&#xff09;库操作表操作CRUD通过存储过程生成大量测试数据连接查询 一、MySql的数据类型 整数类型字节最小值最大值TINGINT1有符号…

白酒:生产过程的可追溯性与质量控制

在豪迈白酒的生产过程中&#xff0c;可追溯性与质量控制是确保产品安全与品质的重要手段。随着消费者对食品安全与质量的关注度不断提高&#xff0c;建立多方的可追溯体系和严格的质量控制措施成为了酒庄的必然选择。 首先&#xff0c;可追溯性是指从原材料到产品的整个生产过程…

electron安装最后一部卡住了?

控制台如下错误 不是的话基本可以划走了 这个很可能是镜像出现问题了&#xff0c;不一定是npm镜像 打开npm的配置文件添加下述 electron_mirrorhttps://cdn.npmmirror.com/binaries/electron/ electron_builder_binaries_mirrorhttps://npmmirror.com/mirrors/electron-build…

vscode 设置打开终端的默认工作目录/路径

vscode 设置打开终端的默认工作目录/路径** 文章目录 vscode 设置打开终端的默认工作目录/路径**打开vscode&#xff0c;打开设置UI 或是设置JSON文件&#xff0c;找到相关设置项方式1&#xff1a;通过打开settings.json的UI界面 设置:方式2&#xff1a;通过打开设置settings.j…

深入理解网络通信基本原理和tcp/ip协议

深入理解网络通信基本原理和tcp/ip协议 一、计算机网络体系1&#xff0c;计算机网络体系结构2&#xff0c;网络中数据传输2.1&#xff0c;浏览器中输入一个url的执行流程2.2&#xff0c;数据在网络中是的传输流程 3&#xff0c;三次握手和四次挥手3.1&#xff0c;三次握手3.1.1…

leetcode 2581. 统计可能的树根数目【换根dp】

原题链接&#xff1a;2581. 统计可能的树根数目 题目描述&#xff1a; Alice 有一棵 n 个节点的树&#xff0c;节点编号为 0 到 n - 1 。树用一个长度为 n - 1 的二维整数数组 edges 表示&#xff0c;其中 edges[i] [ai, bi] &#xff0c;表示树中节点 ai 和 bi 之间有一条边…

【appium】Hybrid应用自动化|微信小程序自动化

目录 一、Hybrid&#xff08;nativewebview&#xff09;应用自动化 1、webview 2、Hybrid应用自动化实现 2.1准备工作 Step1&#xff1a;准备android 4.4版本以上的手机/模拟器 Step2&#xff1a;在app源码中将webview调试模式打开 Step3&#xff1a;安装UC开发者工具 U…