vue elementUI form组件动态添加el-form-item rules且支持添加自定义校验方法

vue elementUI form组件动态添加el-form-item rules且支持添加自定义校验方法

    • 组件动态添加el-form-item并且动态添加rules的方法可以参考博客:
    • 添加自定义校验方法
    • validatePassFun

组件动态添加el-form-item并且动态添加rules的方法可以参考博客:

vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法

添加自定义校验方法

el-form-item添加validatePassFun方法

<el-form-item
v-for="(item, index) in form.key_list"
:prop="'key_list.' + index + '.label'"
:rules="[{required: true, message: $t('请输入'), trigger: 'blur'},validatePassFun('值不能重复', form.key_list, 'change'),validatePassFun('名称不能重复', form.key_list, 'blur')
]"
:key="index"></el-form-item>

validatePassFun

 validatePassFun(msg, _data, action) {return {required: true,validator: (rule, value, cb) => {if (_data不符合校验条件) {cb(new Error(msg))} else {cb()}},trigger: action}}

(rule, value, cb) 为默认参数赋值,应该用_data和value等组合做业务逻辑校验。

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

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

相关文章

PyTorch环境配置问题

为什么深度学习都是用英伟达的显卡&#xff1f; 首先我们需要了解什么是CUDA&#xff1f; CUDA&#xff08;Compute Unified Device Architecture&#xff09;&#xff0c;是显卡厂商 NVIDIA 推出的运算平台。 CUDA就类似于编程语言&#xff0c;开发者和显卡通过CUDA进行交流…

Android网络抓包--Charles

一、Android抓包方式 对Https降级进行抓包&#xff0c;降级成Http使用抓包工具对Https进行抓包 二、常用的抓包工具 wireshark&#xff1a;侧重于TCP、UDP传输层&#xff0c;HTTP/HTTPS也能抓包&#xff0c;但不能解密HTTPS报文。比较复杂fiddler&#xff1a;支持HTTP/HTTPS…

【SpringBoot】mybatis-plus实现增删改查

mapper继承BaseMapper service 继承ServiceImpl 使用方法新增 save,updateById新增和修改方法返回boolean值,或者使用saveOrUpdate方法有id执行修改操作,没有id 执行新增操作 案例 Service public class UserService extends ServiceImpl<UserMapper,User> {// Au…

用于大规模数据集(大于1TB)的并行运算的MapReduce是怎么实现的?

MapReduce 是一种编程模型&#xff0c;用于处理和生成大数据集。MapReduce 分为两个阶段&#xff1a;Map 阶段和 Reduce 阶段。 Map 阶段&#xff1a;在这个阶段&#xff0c;输入数据被拆分成不同的数据块&#xff0c;这些数据块被分发到各个 Map 任务上。每个 Map 任务对输入的…

Golang | Leetcode Golang题解之第24题两两交换链表中的节点

题目&#xff1a; 题解&#xff1a; func swapPairs(head *ListNode) *ListNode {dummyHead : &ListNode{0, head}temp : dummyHeadfor temp.Next ! nil && temp.Next.Next ! nil {node1 : temp.Nextnode2 : temp.Next.Nexttemp.Next node2node1.Next node2.Nex…

数据结构(算法)

总结&#xff0c;建议看EXCEL的《算法》页签&#xff0c;不然感觉有点乱 备注原理/步骤时间复杂度空间复杂度串的应用模式匹配简单/暴力O(mn) KMP  O(mn) 树的应用树哈夫曼树1、带权路径长度WPL 2、外部排序-最佳归并树1、哈夫曼树的度&#xff0c;只有0和m&#xff08;m叉…

react17+antd4 Menu 点击菜单收起其他展开的所有菜单、页面刷新时设置菜单的选中状态和展开状态

菜单栏展开回收、页面刷新时确保菜单状态与当前页面匹配 1.菜单栏展开和回收事件2. 刷新时默认当前选中项样式的处理2.1 刷新页面菜单保持用户之前的选中状态2.2 配置展开项openKeys的初始值 export const asyncRouterMap [{path: /page1,title: page1,icon: HomeOutlined,}, …

Linux上下载部署zentao v15.5及具体的使用

1.先查询一下Linux的操作系统的位数&#xff0c;确保下载的文件位数与os的一致 [rootlocalhost xiaoming]# uname -m x86_64 [rootlocalhost xiaoming]# getconf LONG_BIT 64 2.下载zentao的Linux压缩包 wget https://www.zentao.net/dl/zentao/15.5/ZenTaoPMS.15.5.zbox…

vue创建一个项目

要创建一个Vue项目&#xff0c;你可以使用Vue CLI&#xff08;命令行界面&#xff09;这个官方工具。以下是使用Vue CLI创建一个新项目的步骤&#xff1a; 步骤 1: 安装 Node.js 和 npm 首先&#xff0c;确保你的计算机上已经安装了Node.js和npm&#xff08;Node.js的包管理器…

【opencv】示例-inpaint.cpp 图像修复是通过填充损坏图像部分从而修复这些损坏的过程...

原始图像 这段代码展示了一个使用OpenCV库进行图像修复的例子。它首先包含了处理图像编码、解码、显示、处理和照片处理所必要的OpenCV模块的头文件。然后利用cv和std命名空间下的类和方法。通过定义一个鼠标回调函数onMouse来处理图像上的绘图操作&#xff0c;并通过主函数mai…

基于大数据的全国热门景点数据可视化分析系统

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长 QQ 名片 :) 1. 项目简介 本文将介绍如何使用Python中的Pandas库进行数据挖掘&#xff0c;并结合Flask Web框架实现一个旅游景点数据分析系统。该系统将包括以下功能模块&#xff1a;热门景点概况、景点星级与评分分析、景…

贪心:P2240 【深基12.例1】部分背包问题

目录 【深基12.例1】部分背包问题题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 代码实现 【深基12.例1】部分背包问题 题目描述 阿里巴巴走进了装满宝藏的藏宝洞。藏宝洞里面有 N ( N ≤ 100 ) N(N \le 100) N(N≤100) 堆金币&#xff0c;第 i i i 堆金币的总重…

如何使用 Grafana 监控文件系统状态

当 JuiceFS 文件系统部署完成并投入生产环境&#xff0c;接下来就需要着手解决一个非常重要的问题 —— 如何实时监控它的运行状态&#xff1f;毕竟&#xff0c;它可能正在为关键的业务应用或容器工作负载提供持久化存储支持&#xff0c;任何小小的故障或性能下降都可能造成不利…

已解决java.net.NoRouteToHostException: 无法到达主机异常的正确解决方法,亲测有效!!!

已解决java.net.NoRouteToHostException: 无法到达主机异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 报错原因 解决思路 解决方法 检查网络连接 核实目标地址 检查防火墙和路由器规则 验证VPN/代理设置 修正网络配置 …

Django 实现登录功能

基本实现 路由 from django.urls import path from . import viewsapp_name index urlpatterns [path(, views.index, nameindex),path("login.html/", views.login, name"login"), ]视图 from django.shortcuts import render, redirect from django…

MR混合现实情景实训教学系统在旅游管理课堂上的应用

旅游管理是一门实践性很强的学科&#xff0c;需要学生掌握理论知识的同时&#xff0c;能够在实际工作中灵活运用。传统的课堂教学方式往往只能通过理论讲解和简单的模拟操作来培养学生的实践能力&#xff0c;而MR混合现实情景实训教学系统则可以为学生提供更加真实、生动的实践…

go第三方库go.uber.org介绍

Uber 是一家美国硅谷的科技公司&#xff0c;也是 Go 语言的早期 adopter。其开源了很多 golang 项目&#xff0c;诸如被 Gopher 圈熟知的 zap、jaeger 等。2018 年年末 Uber 将内部的 Go 风格规范 开源到 GitHub&#xff0c;经过一年的积累和更新&#xff0c;该规范已经初具规模…

HCIP-Datacom(H12-821)题库补充(4月12日)

最新 HCIP-Datacom&#xff08;H12-821&#xff09;完整题库请扫描上方二维码访问&#xff0c;持续更新中。 在BGP进程下&#xff0c;Aggregate命令中的detail&#xff3f;suppressed关键字的作用是以下哪一项&#xff1f; A&#xff1a;抑制生成的聚合路由下发IP路由表 B&…

vueRouter动态路由(实现菜单权限控制)

一、权限控制管理&#xff1a; 对于企业级的项目, 我们可能需要对项目做权限控制管理, 实现不同角色的用户登录项目根据所拥有的权限访问不同的页面内容&#xff0c;此时就需要使用到动态路由来对权限页面做限制。 【使用vue-router实现动态路由&#xff0c;达到实现菜单权限…

数据仓库的—数据仓库的体系架构

数据仓库通常采用分层的体系架构设计,作为支撑企业决策分析需求的数据基础设施。典型的数据仓库体系架构由以下三个核心层次组成: 源数据层(Source Layer) 这是数据仓库的数据来源,包括组织内部的各种运营系统,如ERP、CRM、SCM等,以及外部数据源如互联网、社交媒体等。这些系…