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

news2024/11/15 21:32:21

在项目开发过程中发现,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.coloradmin.cn/o/1477059.html

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

相关文章

linux服务器调度数据库的存储过程

1、需要安装数据库的客户端 2、安装sqlplus 3、编写sh脚本 脚本内容如下&#xff1a; 4、设置调度任务

vue3使用百度地图实现个性化地图和轨迹

vue3使用百度地图实现个性化地图和轨迹 最终效果如图&#xff1a; 步骤如下&#xff1a; 一、百度地图在vue3中的引入 1.首先在百度地图开发中心中申请ak&#xff08;不多介绍&#xff09; 2.两种引入方式&#xff1a;在 index.html 中直接引入&#xff1b;使用npm导包。&…

MyBatis 学习(一)之 MyBatis 概述

目录 1 MyBatis 介绍 2 MyBatis 的重要组件 3 MyBatis 执行流程 4 参考文档 1 MyBatis 介绍 MyBatis 是一个半自动化的 ORM &#xff08;Object-Relational Mapping&#xff0c;对象关系映射&#xff09;持久层框架&#xff0c;它允许开发者通过 XML 或注解将对象与数据库中…

STM32进阶笔记——复位、时钟与滴答定时器

本专栏争取每周三更新直到更新完成&#xff0c;期待大家的订阅关注&#xff0c;欢迎互相学习交流。 目录 一、复位1.1 软件复位1.2 低功耗管理复位 二、时钟2.1 系统时钟(SYSCLK)选择2.2 系统时钟初始化 三、滴答定时器&#xff08;Systick&#xff09;3.1 SysTick部分寄存器3.…

docker中hyperf项目配置虚拟域名

在使用hyperf框架时&#xff0c;直接用了docker环境进行开发 下载镜像运行容器 docker run --name hyperf -v /data/project:/data/project -p 9501:9501 -itd -w /data/project --privileged -u root --entrypoint /bin/sh 镜像ID配置docker-compose.yml version: "3.…

python-产品篇-图形验证码

文章目录 准备代码效果 准备 代码 from tkinter import * from tkinter.messagebox import * import time import os root Tk() import random dirall[] randima []def call():global image1global image2global image3global image4global image5global seloneglobal …

sawForceDimensionSDK安装,sigma7+ros

force dimension的sdk中没有关于ros&#xff0c;借助开源的sawForceDimensionSDK实现对于数据的封装和可视化&#xff0c;方便后续使用 链接&#xff1a; GitHub - jhu-saw/sawForceDimensionSDK 具体步骤&#xff1a; 安装qt和ros&#xff0c;官网下载Force Dimension SDK …

Win10系统如何关闭边缘滑动功能?Win10关闭边缘滑动功能方法

Win10系统如何关闭边缘滑动功能&#xff1f;Win10系统支持电脑端和平板等移动设备&#xff0c;所以具有触控操作的功能&#xff0c;较为常见的就是边缘滑动手势功能&#xff0c;但有小伙伴想了解是否可以设置关闭&#xff0c;具体该如何设置呢&#xff1f; 设置方法 1、首先&…

idea2023新UI风格不见了怎么办?

用了一段时间idea2023,有一天不知道点了什么&#xff0c;整个UI又变成了2022的风格 如果想换成2023的UI风格怎么办&#xff1f; 点击file->setting->new UI->勾选Enable new UI&#xff0c;restart就可以回到最新版本的UI了 新风格

groovy:XmlParser 读 Freeplane.mm文件,生成测试案例.csv文件

Freeplane 是一款基于 Java 的开源软件&#xff0c;继承 Freemind 的思维导图工具软件&#xff0c;它扩展了知识管理功能&#xff0c;在 Freemind 上增加了一些额外的功能&#xff0c;比如数学公式、节点属性面板等。 强大的节点功能&#xff0c;不仅仅节点的种类很多&#xff…

Python爬虫项目实战案例-批量下载网易云榜单音乐保存至本地

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua&#xff0c;在这里我会分享我的知识和经验。&#x…

数学学习与研究杂志社《数学学习与研究》杂志社编辑部2023年第29期目录

考试研究 提高高三数学二轮复习质量的思考与实践 佘淮青; 2-4 提升高三数学复习质量的策略探究 王飞; 5-7 核心素养背景下的高中数学命题策略研究 陈明发; 8-10 提升中考数学复习课的有效性研讨 韩兴宏; 11-13 中学教学方法《数学学习与研究》投稿&#xff1a;…

React入门之React_渲染基础用法和class实例写法

渲染元素 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>04元素渲染</title><script src&…

迟到的VNCTF2024逆向题WP

这次比赛因为有事外出&#xff0c;只做了前两题&#xff0c;最近有空才把另外3题也做出来&#xff0c;总体来说比以往的VNCTF逆向题目要难一些。当然也有可能是我水平退步了&#xff0c;就算有时间参加比赛&#xff0c;应该也做不完这5题。VN的小伙伴越来越厉害了&#xff0c;出…

Python + Google AI 自动修复 Sonar Bug 实践

前言 在工作中总会遇到种种不期而至的需求&#xff0c;比如前段时间突然要修复所有 Sonar Bug&#xff0c;涉及各种琐碎的代码风格问题&#xff0c;包括但不限于语法不规范、废弃注释等问题。这些项目都已经持续开发几年了&#xff0c;Sonar 上的问题层出不穷&#xff0c;各种…

汽车三元催化器的废品项目详解,三元催化再生项目的回收技术教学

一、教程描述 这是一个收废品项目&#xff0c;就收那些别人不懂的&#xff0c;三元催化器的附加值高&#xff0c;只要掌握技术&#xff0c;怎么玩都行的&#xff0c;只是要放得下你的面子。三元催化器&#xff0c;是安装在汽车排气系统中最重要的机外净化装置&#xff0c;它可…

Python 神经概率语言模型代码实现和详解,NPLM代码实现和详解;NPLM代码模板讲解,最简单的NLP预测模型

1.神经概率语言模型&#xff1a;NPLM NPLM&#xff08;Neural Probabilistic Language Model&#xff09;是一种经典的神经概率语言模型&#xff0c;被用于自然语言处理任务中。它使用神经网络来学习词汇之间的关系&#xff0c;通过计算词汇序列的概率分布来预测下一个词汇。N…

论文设计任务书学习文档|基于Web的个性化简历职位推荐系统的设计与实现

文章目录 论文(设计)题目:基于Web的个性化简历职位推荐系统的设计与实现1、论文(设计)的主要任务及目标2、论文(设计)的主要内容3、论文(设计)的基本要求4、进度安排论文(设计)题目:基于Web的个性化简历职位推荐系统的设计与实现 1、论文(设计)的主要任务及目标…

log4j 基础使用入门教程

一、Log4j介绍 在项目中&#xff0c;不管是开发人员写代码还是测试人员写的测试代码一般都需要做一些日志来记录项目的行为&#xff0c;以便更好的跟踪项目中的一些交互和问题。 Log4j ( Logger For Java ) , Java 日志的记录包。 官方网站 。Log4j 是 Apache 的一个开源项目…

理解C转汇编后代码分析

题目 . - 力扣&#xff08;LeetCode&#xff09; 解题代码 #include <stdio.h> #include "stdbool.h"typedef struct {int score;int index;int count; } Record; Record records[26] {0};int totalScore(char *w) {int total 0;for (int i 0; i < st…