vue el-form表单嵌套组件时正则校验不生效

vue el-form表单嵌套组件时正则校验不生效

  1. 上图
    在这里插入图片描述
  2. 组件选中数据,但是正则校验未检测到并且红字提示不会消失。
  3. 直接上代码
<template>
  <div class="created_report">
	  <el-form :model="formData" :rules="isRules" ref="formData" label-width="120px">
	   <el-form-item label="接收人:" prop="executive">
	       // 该组件是引用的选人组件
		  <indexBtnComponent v-model="formData.executive" @userChangeHandler="userChangeHandler" />
		   // 重点代码 加入 input 标签 
		   // 第一步
		  <el-input class="input_text input-display-none" ref="input"></el-input>
		</el-form-item>
	  </el-form>
  </div>
</template>
<script>
export default {
   data(){
       // 自定义校验规则
       // 第三步
	    var validateUser = (rule, value, callback) => {
	      if (this.formData.executive) {
	        callback();
	      } else {
	        callback(new Error('请选择接收人'));
	      }
	    };
     return {
        formData: {
             executive: '', //接收人
         },
         isRules: {
             // 第二步
             executive: [{ required: true, validator: validateUser, trigger: ['blur', 'change'] }],
         },
       }
	  },
	  methods:{
	      // 在change事件中 给 this.formData.executive  赋值
	      // 可以是change事件 也可以是值改变后会调用的方法 都行
	      // 第四步
	     userChangeHandler(val){
	       this.formData.executive = val
	        // 调用 input 的 获取焦点 和 失去焦点 事件
	        // 重点
	       this.$refs.input.focus();
      	   this.$refs.input.blur();
	    },
       }
	}
</script>
<style lang="scss" scoped>
  // 此处隐藏input标签
  // 第五步
  .input-display-none{
	  opacity: 0; 
	  width: 0; 
	  height: 0;
	  position: absolute;
	}
</style>
  1. 在这里插入图片描述

  2. 搞定!

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

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

相关文章

什么是多域名证书?

多域名证书是指同一个证书中包含多个域名&#xff0c;能够在多个站点之间共享一份证书&#xff0c;实现一个站点对应多个域名的情况。多域名证书非常适合需要跨多个站点部署的应用&#xff0c;例如企业的子站点、博客等。 特点 多域名证书的优点包括以下几个方面&#xff1a;…

第7章-使用统计方法进行变量有效性测试-7.4.1-简单线性回归

目录 基本概念 变量之间的关系 相关分析 回归分析 相关分析和回归分析的关系 一元线性回归模型 总体回归函数 样本回归函数 线性回归模型的假定 普通最小二乘法&#xff08;Ordinary Least Squares&#xff0c;OLS&#xff09; 拟合优度指标 回归系数估计量的性质 …

麒麟信安与MatrixOne完成兼容互认

近日&#xff0c;超融合异构云原生数据库MatrixOne企业版软件V1.0完成了与欧拉开源操作系统&#xff08;openEuler简称“欧拉”&#xff09;、麒麟信安操作系统系列产品和虚拟化平台的相互兼容认证&#xff0c;通过了欧拉兼容性测评&#xff0c;获得了《openEuler技术测评证书》…

Java核心知识点整理大全7-笔记

目录 4.1.9. JAVA 锁 4.1.9.1. 乐观锁 4.1.9.2. 悲观锁 4.1.9.3. 自旋锁 4.1.9.4. Synchronized 同步锁 Synchronized 作用范围 Synchronized 核心组件 Synchronized 实现 4.1.9.5. ReentrantLock Lock 接口的主要方法 非公平锁 公平锁 ReentrantLock 与 synchronized …

千梦网创:你现在赚的钱是三年前选择的结果

前一阵跟战友去上海逛了一圈&#xff0c;傍晚两个人坐在外滩边感慨互联网时代的机遇之大。 三年前在部队里我们对互联网可以说还是一无所知&#xff0c;月入过万就是我们对未来最大的憧憬目标。 这三年里&#xff0c;我们不仅稳稳的迈过了月入过万的门槛&#xff0c;还经历过…

小微初创企业,如何利用媒体宣传快速成长

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 对于小微初创企业来说&#xff0c;利用媒体宣传可以快速提升品牌知名度、扩大影响力&#xff0c;进而促进企业的成长。 1.确定宣传目标&#xff1a;是增加销售、提升品牌知名度、还是推…

HarmonyOS ArkTS List组件和Grid组件的使用(五)

简介 ArkUI提供了List组件和Grid组件&#xff0c;开发者使用List和Grid组件能够很轻松的完成一些列表页面。常见的列表有线性列表&#xff08;List列表&#xff09;和网格布局&#xff08;Grid列表&#xff09;&#xff1a; List组件的使用 List是很常用的滚动类容器组件&…

创新无界:通义灵码在测试过程中展现的独特魅力

通义灵码基于通义大模型&#xff0c;提供代码智能生成、研发智能问答能力。本文就来介绍下通义灵码在测试过程中的应用。 操作手册&#xff1a; 通义灵码, 阿里云提供的一款基于通义大模型的智能编码辅助工具_云效-阿里云帮助中心 1. 什么是通义灵码 是阿里云出品的一款基于通…

【紫光同创PCIE教程】——使用WinDriver驱动紫光PCIE

本原创教程由深圳市小眼睛科技有限公司创作&#xff0c;版权归本公司所有&#xff0c;如需转载&#xff0c;需授权并注www.meyesemi.com) 紫光的logos系列的PGL50H/PGL100H、logos-2全系列都集成gen24的PCIE硬核&#xff0c;且官方也提供了例程。 紫光的PCIE用起来还是挺方便的…

你真的了解 Cookie 和 Session 吗?

文章目录 Cookie 和 Session总结 Cookie 和 Session cookie HTTP cookie&#xff08;web cookie、browser cookie&#xff09;是服务器发送给用户 web 浏览器的一小段数据。浏览器可能会存储 cookie&#xff0c;并在以后的请求中将其发送回同一台服务器。通常&#xff0c;HTTP …

山西电力市场日前价格预测【2023-11-22】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-11-22&#xff09;山西电力市场全天平均日前电价为13.55元/MWh。其中&#xff0c;最高日前电价为243.27元/MWh&#xff0c;预计出现在18:00。最低日前电价为0.00元/MWh&#xff0c;预计出现…

系统之家U盘重装系统Win10方法步骤

用户发现自己电脑上的Win10系统出现问题了&#xff0c;想要通过重装系统来解决问题。但是&#xff0c;用户还不清楚具体重新安装Win10系统的步骤&#xff0c;接下来小编给大家详细介绍利用U盘完成Win10系统重装的方法&#xff0c;在这里用户需要下载系统之家装机大师软件&#…

Linux fork和vfork函数用法

fork和vfork是用于创建新进程的函数&#xff0c;在Linux的C语言编程中非常常见。 fork函数 fork函数是用于创建一个新的进程&#xff0c;新进程是调用进程的副本。新进程将包含调用进程的地址空间、文件描述符、栈和数据。在fork之后&#xff0c;父进程和子进程将并发执行。 …

AR眼镜方案—单目光波导AR智能眼镜

光波导技术是一项具有前沿意义的技术&#xff0c;它能够将光线反射180度&#xff0c;使得眼镜框架内置的MicroLED屏幕的图像通过多次反射与扩散后准确地传递到人眼中。采用MicroLED显示技术的AR智能眼镜不仅体积显著缩小&#xff0c;屏幕只有0.68英寸大小&#xff0c;并且还能够…

企业数字化转型所需的数据在哪里找?企业数据运营有什么用?

现阶段&#xff0c;越来越多企业考虑数字化转型。特别是中小型企业&#xff0c;他们察觉到&#xff1a;数字化转型的关键在于数据的运营。只有通过数据的有效管理和不断挖掘&#xff0c;企业才可以更好地了解市场需求&#xff0c;优化业务流程&#xff0c;提高决策效率&#xf…

SAP smartform和ALV如何使用图片 如何下载SE78上传的图片到本地

原文链接1&#xff1a;https://mp.weixin.qq.com/s/gb3LCoDLNhZGnpplG68cyA 原文链接2&#xff1a;https://mp.weixin.qq.com/s/iFFhGwFEK93QiddR1biXyA 1.如何在SMARTFORM中打印图片 在使用SmartForms进行打印单据开发时候&#xff0c;经常需要将公司的LOGO、公司印章、管理人…

CTF/AWD竞赛标准参考书+实战指南

随着网络安全问题日益凸显&#xff0c;国家对网络安全人才的需求持续增长&#xff0c;其中&#xff0c;网络安全竞赛在国家以及企业的人才培养和选拔中扮演着至关重要的角色。 在数字化时代&#xff0c;企业为了应对日益增长的攻击威胁&#xff0c;一般都在大量部署安全产品、…

ACREL DC energy meter Application in Indonesia

安科瑞 华楠 Abstract: This article introduces the application of Acrel DC meters in base station in Indonesia.The device is measuring current,voltage and energy together with hall current sensor. 1.Project Overview This company is located in Indonesia a…

leetcode:415. 字符串相加(模拟竖式计算)

一、题目 链接&#xff1a; 415. 字符串相加 - 力扣&#xff08;LeetCode&#xff09; 函数原型&#xff1a;char* addStrings(char* num1, char* num2) 二、思路&#xff1a; 本题本质是将两个字符型数字相加&#xff0c;字符型数字相加就一定需要进行字符与数字的相互转换 详…