【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-validator
          callback(new Error('请至少选择一个接收人'))
        } else {
          callback()
        }
      }

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

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

相关文章

C++ 反向迭代器的设计与实现

在本文开始之前&#xff0c;先明晰几个 关键词 的含义&#xff08;T : 模板参数&#xff09;&#xff1a; Ref : T& / const T&Ptr : T* / const T* 一、反向迭代器设计的上帝视角 我们希望将 反向迭代器 设计成一种适配器——传 list::iterator 得到 list 的反向迭代…

前端AR图像增强 + 图像追踪 + 模型渲染

文章目录 背景介绍技术介绍准备目标图片准备3D模型整合到一起演示代码地址背景介绍 本文实现web端html实现AR识别功能 在日常生活中常常看到AR虚拟现实相结合的案例 如下图的效果匹配到目标图片后展示3D模型 从而提高真实度 AR识别 技术介绍 想要达到效果有以下几步是必须的 准…

稀疏卷积Sparse Convolution

1. 为什么提出稀疏卷积&#xff1f;它有什么好处&#xff1f; 卷积神经网络已经被证明对于二维图像信号处理是非常有效的。然而&#xff0c;对于三维点云信号&#xff0c;额外的维度显著增加了计算量。 另一方面&#xff0c;与普通图像每个像素都有值不同的是&#xff0c;一般…

android开发书籍推荐,android面试复习

笼统来说&#xff0c;中年程序员容易被淘汰的原因其实不外乎三点。 1、输出能力已到顶点。这个人奋斗十来年了&#xff0c;依旧碌碌无为&#xff0c;很明显这人的天花板就这样了&#xff0c;说白了&#xff0c;天赋就这样。 2、适应能力越来越差。年纪大&#xff0c;有家庭&…

css5定位与隐藏

css 一.定位1.概念&#xff08;定位定位模式边位移&#xff09;2.静态位移static&#xff08;不常用&#xff09;3.相对定位relative&#xff08;不脱标&#xff09;&#xff08;占位置&#xff09;4.绝对定位absolute&#xff08;脱标&#xff09;&#xff08;不占位置&#x…

服务器数据恢复-异常断电导致服务器硬盘离线的数据恢复案例

服务器数据恢复环境&#xff1a; dell某型号服务器中有一组通过raid卡组建的raid10&#xff0c;该raid阵列中一共有4块磁盘。上层部署XenServer虚拟化平台&#xff0c;作为网站服务器使用。 服务器故障&#xff1a; 服务器异常断电导致服务器上的一台虚拟机不可用。需要恢复这…

(vue)复合型输入框el-input输入数字类型,e,+,-等特殊符号可以输入

(vue)复合型输入框el-input输入数字类型&#xff0c;e&#xff0c;&#xff0c;-等特殊符号可以输入 效果 代码 <el-form-item label"分数区间"><el-inputplaceholder"请输入内容"v-model.number"formInline.scoreIntervalValue"clas…

MySQL 如何从 Binlog 找出变更记录并回滚

文章目录 前言1. 案例模拟1.1 确认信息1.2 下载 Binlog1.3 准备环境1.4 注册 Binlog1.5 准备结构信息1.6 Python 订阅1.7 输出结果展示 2. 原理解析2.1 程序设计2.2 模块版本 总结 前言 最近有研发同学问我&#xff1a;有一个问题&#xff0c;想查一个 ID 为 xxxx 的 sku 什么…

硬件工程师入门基础知识(三)钽电容应用(三)

钽电容安装测试说明 1.使用测量2.清洗电路板3.焊接4.推荐的高能混合电容器安装方法5.使用环境与贮存6.钽电容参数测试条件 将电容器安装在印刷电路板上时&#xff0c;如受到过大的机械冲击或热冲击等负荷&#xff0c;将引起电气特性劣化、开路、短路等&#xff0c;故请在确认实…

基于x86架构的OpenHarmony应用生态挑战赛等你来战!

为了更快速推进OpenHarmony在PC领域的进一步落地&#xff0c;加快x86架构下基于OpenHarmony的应用生态的繁荣&#xff0c;为北向应用开发者提供一个更加便捷的开发环境&#xff0c;推动OpenHarmony北向应用开发者的增加&#xff0c;助力OpenHarmony在PC领域实现新的突破&#x…

【机器学习】特征选择之包裹式特征选择法

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;机器学习 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进…

TESTLINK 测试用例数据结构解析

一、node_types 测试组件信息表 我们查询表 select * from testlink.node_types; 得到如下结果 二、nodes_hierarchy 测试用例目录层次表 我们以下图的项目为例,来讲解 1、测试项目 首先,我们有个Train的项目,存在表testprojects中,可以用如下sql查找到 select * fr…

【Linux C | 网络编程】gethostbyname 函数详解及C语言例子

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

软考-系统集成项目管理中级-信息系统建设与设计

本章重点考点 1.信息系统的生命周期 信息系统建设的内容主要包括设备采购、系统集成、软件开发和运维服务等。信息系统的生命周期可以分为四个阶段:立项、开发、运维和消亡。 2.信息系统开发方法 信息系统常用的开发方法有结构化方法、原型法、面向对象方法等 1)结构化方法 …

VS连接MySQL以及找不到libmysql.dll的解决方法

VS连接数据库需要在项目中进行配置&#xff0c;具体可见 https://blog.csdn.net/weixin_40582034/article/details/115562097?ops_request_misc%257B%2522request%255Fid%2522%253A%2522170891897216800213058288%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522…

前端开发——ElementUI组件的使用

文章目录 1. Tabs标签页2. 单选框 el-radio3. 复选框 el-checkbox4. 下拉框 el-select5. 表格 el-table6. 对话框 el-dialog7. 文字提示 el-tooltip8. 抽屉 el-drawer 1. Tabs标签页 <template><el-tabs v-model"activeName" tab-click"handleClick&q…

linux操作docker

docker地址 官方地址 centos7安装docker 卸载旧版本docker sudo //在前面表示以管理员权限操作yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine安装docker //安装所需资…

综合实战(volume and Compose)

"让我&#xff0c;重获新生~" MySQL 灾难恢复 熟练掌握挂载卷的使用&#xff0c;将Mysql的业务数据存储在 外部。 实战思想: 使用 MySQL 5.7 的镜像创建容器并创建一个普通数据卷 "mysql-data"用来保存容器中产生的数据。我们需要容器连接到Mysql服务&a…

流水账-20240229

目录 git本地回滚到到120bc409ee3b8f63a23d0060e55118bcce557acf提交记录本地提交到已有代码分支 IDEA批量导入快捷键无效更换背景主题快捷键快捷键可以设置eclipse模式&#xff0c;但是有些不生效&#xff0c;可能是冲突了Ctrl单击&#xff0c;Eclipse里面是可以跳转到代码内部…

数仓项目6.0(二)数仓

中间的几步意义就在于&#xff0c;缓存中间处理数据样式&#xff0c;避免重复计算浪费算力 分层 ODS&#xff08;Operate Data Store&#xff09; Spark计算过程中&#xff0c;存在shuffle的操作&#xff0c;而shuffle会将计算过程一分为二&#xff0c;前一阶段不执行完&…
最新文章