vue里el-form+el-table实现验证规则的写法

vue里el-form+el-table实现验证规则的写法

  • vue里el-form+el-table实现验证规则的写法

vue里el-form+el-table实现验证规则的写法

重点是因为使用el-form + el-table与单独使用el-form数据不同,前者是对象+json数组,后者是对象,导致了el-form-item绑定prop时的写法不同

以下是el-form+el-table实现验证规则的写法

<template ><el-form :model="form" ref="form" :rules="formRules" size="small"><el-table :data="form.userList"><el-table-column type="index" label="序号"></el-table-column><el-table-column label="姓名"><template slot-scope="{row, $index}"><el-form-item :prop="`userList.${$index}.name`" :rules='formRules.name'><el-input v-model="row.name"></el-input></el-form-item></template></el-table-column></el-table></el-form>
</template><script>
export default {data () {return {form: {userList: [{id: 1,name: '张三'},{id: 2,name: '李四'}]},formRules: {name: [{ required: true, message: '请输入姓名', trigger: 'blur' },{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }]}}},
}
</script>

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

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

相关文章

WebSocket与SSE区别

一&#xff0c;websocket WebSocket是HTML5下一种新的协议&#xff08;websocket协议本质上是一个基于tcp的协议&#xff09; 它实现了浏览器与服务器全双工通信&#xff0c;能更好的节省服务器资源和带宽并达到实时通讯的目的 Websocket是一个持久化的协议 websocket的原理 …

ceph架构及 IO流程

CEPH是由多个节点构成的集群&#xff0c;它具有良好的可扩展性和可靠性。节点之间相互通信以达到&#xff1a; 存储和检索数据 数据复制 监控集群的健康状况 保证数据的完整性 检测故障并恢复 基本架构如下图&#xff1a; 分布式对象存储系统RADOS是CEPH最为关键的技术&a…

20.添加HTTP模块

添加一个简单的静态HTTP。 这里默认读者是熟悉http协议的。 来看看http请求Request的例子 客户端发送一个HTTP请求到服务器的请求消息&#xff0c;其包括&#xff1a;请求行、请求头部、空行、请求数据。 HTTP之响应消息Response 服务器接收并处理客户端发过来的请求后会返…

QT之QWebEngineUrlRequestInterceptor

QWebEngineUrlRequestInterceptor用来拦截网络请求&#xff0c;例如如果需要查看网页中发生了哪些get/post请求。 QWebEngineUrlRequestInterceptor是一个抽象类&#xff0c;意味着需要子类化它才能得到所需的内容&#xff0c;使用方法如下&#xff1a; 头文件&#xff1a; c…

android studio 的 adb配置

首先在 Android Studio 中 打开 File -> Settings: 下载 “Google USB Driver” 这个插件 (真机调试的时候要用到), 并且记一下上面的SDK路径: 右键桌面上的 “我的电脑”, 点击 “高级系统设置”, 配置计算机的高级属性, 有两步: 添加一个新的环境变量 ANDROID_HOME, 变量…

一、Java基础面试题

Java Se Java语言有哪些特点&#xff1f; 简单易学&#xff1b;面向对象(封装、继承、多态);平台无关性支持多线程可靠性(具备异常处理和自动内存管理机制) JVM 、JDK 、JRE三者之间的关系&#xff1f; JDK(Java Develoment Kit): 是Java开发工具包&#xff0c;是整个Java的核…

17 | Spark中的map、flatMap、mapToPair mapvalues 的区别

在Apache Spark中,map、flatMap、mapToPair和mapValues是用于对RDD(Resilient Distributed Dataset)进行转换的不同操作。这些操作可以用来处理分布式数据集中的元素,但它们的用途和行为略有不同。 以下是它们的主要区别以及相应的Java代码示例: map:map操作用于对RDD中…

【C++】C++面向对象编程三大特性之一——继承

❤️前言 本篇博客主要是关于C面向对象编程中的三大特性之一的继承&#xff0c;希望大家能和我一起共同学习进步&#xff01; 正文 我们刚刚学习一块全新的知识&#xff0c;首先简单关注一下它的概念和简单的使用方法。 继承的概念及定义 继承的概念 继承的概念&#xff1a;…

WordPress Page Builder KingComposer 2.9.6 Open Redirection

WordPress Page Builder KingComposer 2.9.6 Open Redirection WordPress 插件 KingComposer 版本2.9.6 以及以前版本受到开放重定向漏洞的影响。该漏洞在packetstorm网站披露于2023年7月24日&#xff0c;除了该漏洞&#xff0c;该版本的插件还存在XSS攻击的漏洞风险 图1.来自…

AI「反腐」,德国马普所结合 NLP 和 DNN 开发抗蚀合金

内容一览&#xff1a;在被不锈钢包围的世界中&#xff0c;我们可能都快忘记了腐蚀的存在。然而&#xff0c;腐蚀存在于生活中的方方面面。无论是锈迹斑斑的钢钉&#xff0c;老化漏液的电线&#xff0c;还是失去光泽的汽车&#xff0c;这一切的发生都与腐蚀有关。据统计&#xf…

通信笔记:RSRP、RSRQ、RSNNR

0 基础概念&#xff1a;RE、RS和RB RE (Resource Element)&#xff1a;资源元素是 LTE 和 5G 网络中的最小物理资源单位。一个资源元素对应于一个子载波的一个符号周期。 RS (Reference Signal)&#xff1a;参考信号是在 LTE 和 5G 网络中用于多种目的的特定类型的信号。它们可…

深入剖析云计算与云服务器ECS:从基础到实践

云计算已经在不断改变着我们的计算方式和业务模式&#xff0c;而云服务器ECS&#xff08;Elastic Compute Service&#xff09;作为云计算的核心组件之一&#xff0c;为我们提供了灵活、可扩展的计算资源。在本篇长文中&#xff0c;我们将从基础开始&#xff0c;深入探讨云计算…

数学建模--三维图像绘制的Python实现

目录 1.绘制三维坐标轴的方法 2.绘制三维函数的样例1 3.绘制三维函数的样例2 4.绘制三维函数的样例3 5.绘制三维函数的样例4 6.绘制三维函数的样例5 1.绘制三维坐标轴的方法 #%% #1.绘制三维坐标轴的方法 from matplotlib import pyplot as plt from mpl_toolkits.mplot3…

【算法系列篇】分冶-快排

文章目录 前言什么是分冶1.颜色分类1.1 题目要求1.2 做题思路1.3 Java代码实现 2. 排序数组2.1 题目要求2.2 做题思路2.3 Java代码实现 3.数组中的第k个最大元素3.1 题目要求3.2 做题思路3.3 Java代码实现 4. 最小的k个数4.1 题目要求4.2 做题思路4.3 Java代码实现 总结 前言 …

Python Tkinter Multiple Windows 教程

一、说明 在这个Python Tkinter教程中&#xff0c;我们将学习如何在Python Tkinter中创建多个窗口&#xff0c;我们还将介绍与多个窗口相关的不同示例。而且&#xff0c;我们将介绍这些主题。 Python Tkinter multiple windows使用多个窗口的 Python Tkinter 用户注册Python Tk…

7 Series FPGAs GTX/GTH Transceivers

目录 1. Overview2. Block Diagram3. Transmitter4. Receiver5. Physical Coding Sublayer&#xff08;PCS&#xff09;6. Physical Medium Attachment&#xff08;PMA&#xff09; 本博客为Xilinx 7系列FPGA的千兆比特高速收发器&#xff08;Gigabit Transceiver, GT&#xff…

【聚类】DBCAN聚类

OPTICS是基于DBSCAN改进的一种密度聚类算法&#xff0c;对参数不敏感。当需要用到基于密度的聚类算法时&#xff0c;可以作为DBSCAN的一种替代的优化方案&#xff0c;以实现更优的效果。 原理 基于密度的聚类算法&#xff08;1&#xff09;——DBSCAN详解_dbscan聚类_root-ca…

跨源资源共享(CORS)Access-Control-Allow-Origin

1、浏览器的同源安全策略 没错&#xff0c;就是这家伙干的&#xff0c;浏览器只允许请求当前域的资源&#xff0c;而对其他域的资源表示不信任。那怎么才算跨域呢&#xff1f; 请求协议http,https的不同域domain的不同端口port的不同 好好好&#xff0c;大概就是这么回事啦&…

【权限提升-Windows提权】-UAC提权之MSF模块和UACME项目-DLL劫持-不带引号服务路径-不安全的服务权限

权限提升基础信息 1、具体有哪些权限需要我们了解掌握的&#xff1f; 后台权限&#xff0c;网站权限&#xff0c;数据库权限&#xff0c;接口权限&#xff0c;系统权限&#xff0c;域控权限等 2、以上常见权限获取方法简要归类说明&#xff1f; 后台权限&#xff1a;SQL注入,数…

伪类与伪元素

伪类与伪元素 伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述&#xff0c;引用标准中的话就是&#xff1a;CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。 文档树又称标准流&#xff0c;是浏览器在渲染显示网页内容时默认采用的一套排版规则…