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

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

相关文章

六、Big Data Tools安装

1、安装 在Jetbrains的任意一款产品中&#xff0c;均可安装Big Data Tools这个插件。 2、示例 下面以DadaGrip为例&#xff1a; &#xff08;1&#xff09;打开插件中心 &#xff08;2&#xff09;搜索Big Data Tools&#xff0c;下载 3、链接hdfs &#xff08;1&#xff0…

时间复杂度和运算

时间复杂度 在算法和数据结构中&#xff0c;有许多时间复杂度比 O(1) 更差的情况。以下是一些常见的时间复杂度&#xff0c;按照从最优到最差的顺序排列&#xff1a; O(1)&#xff1a; 常数时间复杂度&#xff0c;操作的运行时间与输入规模无关&#xff0c;是最理想的情况。 O…

xss-labs靶场1-5关

文章目录 前言一、靶场需要知道的前置知识点1、什么是xss攻击&#xff1f;2、xss攻击分为几大类1、反射型xss2、存储型xss3、dom型xss 3、xss攻击形成的条件 二、xss-labs关卡1-51、关卡12、关卡23、关卡34、关卡45、关卡5 总结 前言 此文章只用于学习和反思巩固xss攻击知识&a…

【数据结构-零基础学习】线索二叉树(代码+图示+解析)

【数据结构-零基础学习】线索二叉树(代码图示解析) 文章目录 【数据结构-零基础学习】线索二叉树(代码图示解析)[toc]定义产生背景种类示意图1)未加入线索的普通二叉树示意图1.12)线索添加的规则3)中序线索二叉树示意图1.24)中序线索二叉树分析示意图1.3 设计代码逻辑(重点)代码…

智能座舱架构与芯片- (15) 测试篇 下

三、持续集成与交付 3.1 自动化编译框架 在智能座舱软件中&#xff0c;分为上层应用软件和底层软件。有些上层应用软件是与指令集平台无关的&#xff0c;例如Java应用程序等&#xff0c;它们对所运行的CPU平台没有依赖性&#xff0c;可以很好的适配当前平台进行执行。而在底层…

Notion AI会员订阅付费

一、Notion AI优势&#xff1a; 自动化任务&#xff1a;NotionAI可以自动完成一些重复性任务&#xff0c;例如对内容进行分类和标记&#xff0c;从而提高工作效率和减少人力成本。个性化建议&#xff1a;NotionAI可以根据用户的偏好和行为模式提供个性化的建议和推荐&#xff…

Linux下安装Foldseek并从蛋白质的PDB结构中获取 3Di Token 和 3Di Embedding

0. 说明&#xff1a; Foldseek 是由韩国国立首尔大学 (Seoul National University) 的 Martin Steinegger (MMseqs2 和 Linclust 的作者) 开发的一款用于快速地从大型蛋白质结构数据库中检索相似结构蛋白质的工具&#xff0c;可以用于计算两个蛋白之间的结构相似性&#xff0c…

森林之子/Sons Of The Forest V42457 资源分享

游戏介绍&#xff1a; 视频介绍&#xff1a; 森林之子 资源分享 这里是引用 你被派到了一座孤岛上&#xff0c;寻找一位失踪的亿万富翁&#xff0c;结果却发现自己深陷被食人生物占领的炼狱之地。你需要制作工具和武器、建造房屋&#xff0c;倾尽全力生存下去&#xff0c;无论…

数据结构与算法实验(黑龙江大学)

实验一 顺序存储的线性表&#xff08;2 学时&#xff09; 一、实验目的 1 、掌握线性表的逻辑结构特征。 2、熟练掌握线性表的顺序存储结构的描述方法。 3 、熟练掌握顺序表上各种基本操作的实现。 二、实验内容 1 、设线性表的数据元素都为整数&#xff0c;存放在顺序表…

基于变色龙算法优化概率神经网络PNN的分类预测 - 附代码

基于变色龙算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于变色龙算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于变色龙优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神经网络…

【Docker】从零开始:4.为什么Docker会比VM虚拟机快

【Docker】从零开始&#xff1a;4.为什么Docker会比VM虚拟机快 docker有着比虚拟机更少的抽象层docker利用的是宿主机的内核,而不需要加载操作系统OS内核 docker有着比虚拟机更少的抽象层 由于docker不需要Hypervisor(虚拟机)实现硬件资源虚拟化,运行在docker容器上的程序直接…

革新突破!智能指标平台引领时代,国产大模型与企业级部署的完美结合

11月21日&#xff0c;跬智信息&#xff08;Kyligence&#xff09;圆满召开了线上数智论坛暨产品发布会&#xff0c;升级智能一站式指标平台 Kyligence Zen 及 AI 数智助理 Kyligence Copilot 的一系列企业级能力&#xff0c;包括正式支持智谱 AI、百川智能等在内的多款国产大模…

ECharts 实例2

之前做过一个 ECharts 例子&#xff1b;再做一个看一下&#xff1b; <!DOCTYPE html> <html> <head><meta charset"gb2312"><title> 多bar 实例</title><!-- 引入 echarts.js --><script src"https://cdn.static…

【JavaScript】2.4 JavaScript和浏览器

文章目录 DOM 操作选择元素修改元素创建和删除元素 事件处理监听事件阻止默认行为 异步编程回调函数Promiseasync/await 总结 JavaScript最初是为了在浏览器中使用而创建的&#xff0c;它是Web开发的重要组成部分。在这一章节中&#xff0c;我们将学习如何使用JavaScript与浏览…

Gitlab安装与操作

GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xff0c;并在此基础上搭建起来的Web服务。 可通过Web界面进行访问公开的或者私人项目。它拥有与Github类似的功能&#xff0c;能够浏览源代码&#xff0c;管理缺陷和注释。可以管理团队对仓库的…

shell基础

一.Shell脚本编程概述 1.基本概念 将要执行的命令按顺序保存到一个文本文件&#xff1b; 给该文件可执行权限&#xff1b; 可结合各种Shell控制语句以完成更复杂的操作。 2.作用 Linux系统中的Shell是一个特殊的应用程序&#xff0c;它介于操作系统内核与用户之间&#x…

单链表——OJ题(一)

目录 ​一.前言 二.移除链表元素 三.返回链表中间节点 四.链表中倒数第K个节点 五.合并两个有序链表 六.反转链表 七.链表分割 八.链表的回文结构 九.相交链表 十.环形链表 十一.环形链表&#xff08;二&#xff09; ​六.结语 一.前言 本文主要对平时的链表OJ进行…

Day33力扣打卡

打卡记录 最大和查询&#xff08;排序单调栈上二分&#xff09; 链接 大佬的题解 class Solution:def maximumSumQueries(self, nums1: List[int], nums2: List[int], queries: List[List[int]]) -> List[int]:ans [-1] * len(queries)a sorted(((a, b) for a, b in zi…

机器学习第11天:降维

文章目录 机器学习专栏 主要思想 主流方法 1.投影 二维投射到一维 三维投射到二维 2.流形学习 一、PCA主成分分析 介绍 代码 二、三内核PCA 具体代码 三、LLE 结语 机器学习专栏 机器学习_Nowl的博客-CSDN博客 主要思想 介绍&#xff1a;当一个任务有很多特征…

如何在IAR软件中使用STLINK V2编译下载和调试stm8单片机

安装使用IAR后&#xff0c;如使用系统默认设置&#xff0c;往往很难正常实现用stlink v2来下载和调试stm8芯片&#xff0c;我的解决方法如下&#xff1a; 1、打开项目的options菜单&#xff1a; 2、在项目的选项菜单中选择ST-LINK作为调试工具&#xff1a; 3、选择额外的输出…