ant-design-vue 可输入表格的校验方法

news2024/11/25 11:05:47

1、思路,首先用a-form包裹a-table,( 主要是name的取值问题,要严格按照['数据源',index,'校验的字段']来)

<a-form ref="form" :model="formData" :rules="rules">
   <a-table :dataSource="formData.tableList" :columns="columns" :pagination="false" bordered>
      <template #bodyCell="{ column, index, record }">
          <template v-if="column.key === 'copiesNumber'">
            <a-form-item :name="['tableList', index, 'copiesNumber']" :rules="rules.copiesNumber">
              <a-input v-model:value="record.copiesNumber" />
            </a-form-item>
          </template>
      </template>
   </a-table>
</a-form>



const formData = ref<any>({
    tableList: [],
  });

const rules = ref({
    copiesNumber: [{ required: true, message: '请输入数量', trigger: 'blur' }],
  });

const form = ref();
const submitSure = () => {
    form.value
      .validate()
      .then((values) => {
        console.log('验证通过,表单数据为:', values);
      })
      .catch((errorInfo) => {
        console.log('验证失败,错误信息为:', errorInfo);
      });
}

2、效果图

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

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

相关文章

charAt,chartCodeAt,codePointAt,fromCodePoint,fromCharCode

生僻字的length算2,有些空格是特殊空格,比如\u3000 u3000不是全角空格&#xff0c;u3000是表意字空格&#xff08;Ideographic Space&#xff09;&#xff0c;宽度和一个表意字&#xff08;汉字&#xff09;相同。它应当被当做汉字来处理。比如&#xff0c;在一些排版中&#x…

Vxe UI vue vxe-table select 下拉框选项列表数据量超大过大时卡顿解决方法

Vxe UI vue vxe-table vxe-grid select 下拉框选项列表数据量超大过大时卡顿解决方法 查看 github vxe-table 官网 vxe-table 本身支持虚拟滚动&#xff0c;数据量大也是支持的&#xff0c;但是如果在可编辑表格中使用下拉框&#xff0c;下拉框的数据量超大时&#xff0c;可能…

【源码+文档+调试讲解】宜家宜业物业管理系统node.js框架

摘 要 近年来&#xff0c;科技飞速发展&#xff0c;在经济全球化的背景之下&#xff0c;互联网技术将进一步提高社会综合发展的效率和速度&#xff0c;互联网技术也会涉及到各个领域&#xff0c;而宜家宜业物业管理系统在网络背景下有着无法忽视的作用。信息管理系统的开发是…

Chromium 如何构建一个单独exe c++

1、在src目录下新建一个jdtest文件夹 src\jdtest 2、在jdtest文件下添加BUILD.gn jdtest.cc build.gn 内容如下&#xff1a; # Copyright 2014 The Chromium Authors # Use of this source code is governed by a BSD-style license that can be # found in the LICENSE file…

python27_strip()去除函数

strip()去除函数 # 示例字符串 s1 "*hello*world*oh*yeah*" s2 " helloworldohyeah "# 使用 strip() 去除两端的 * def StrStrip(a):result_strip a.strip("*")return result_strip# 替换成空字符串 def StrReplaceNull(a):result_empty a.…

OOOPS:零样本实现360度开放全景分割,已开源 | ECCV‘24

全景图像捕捉360的视场&#xff08;FoV&#xff09;&#xff0c;包含了对场景理解至关重要的全向空间信息。然而&#xff0c;获取足够的训练用密集标注全景图不仅成本高昂&#xff0c;而且在封闭词汇设置下训练模型时也受到应用限制。为了解决这个问题&#xff0c;论文定义了一…

软考《信息系统运行管理员》- 4.2信息系统软件运维的管理

4.2信息系统软件运维的管理 管理流程 信息系统软件运维服务的四个关键要素是&#xff1a;人员、资源、技术和过程&#xff0c;每个要素通过关键 指标反映运维服务的能力。 人员 确保提供信息系统软件运维服务的相关人员具备应有的运维服务能力&#xff0c;主要从人员管理、 …

掌握未来:2025年秋招LLM及多模态模型面试精华

目录 大模型常用微调方法LoRA和Ptuning的原理介绍Stable Diffusion的原理为何现在的大模型大部分是Decoder-only结构如何缓解LLMs复读机问题为什么Transformer块使用LayerNorm而不是BatchNormTransformer为何使用多头注意力机制监督微调SFT后LLM表现下降的原因微调阶段样本量规…

【大数据】Spark弹性分布式数据集RDD详细说明

文章目录 整体介绍一、定义与特性二、操作与转换三、存储级别与持久化四、依赖关系与容错机制五、优化与性能调优 常见操作支持的数据格式1.文本文件 (Text Files)2. CSV 文件3. JSON 文件4. Parquet 文件5. Sequence Files6.Hadoop文件读取A. 读取HDFS上的文本文件B. 使用Hado…

深度学习基础—人脸识别

在人脸识别领域&#xff0c;常常有两个词容易被混淆&#xff0c;人脸验证和人脸识别。人脸验证是输入一个人的照片和名字&#xff08;或者ID&#xff09;&#xff0c;验证这个人是否和名字相符。人脸识别是输入一个人的照片&#xff0c;识别这个人是否是数据库中存在的人。人脸…

VScode中配置可编写C/C++代码

VScode的下载 下载地址&#xff1a;https://code.visualstudio.com/ 安装中文插件 重启后&#xff0c;生效&#xff01;&#xff01;&#xff01; 下载和配置MinGW-w64 https://github.com/niXman/mingw-builds-binaries/releases 这里可以自行选择线程模型WIN32或posix&a…

【Linux报错】“-bash: cd: too many arguments“

问题描述 今天使用 cd 想要调整某个文件目录时&#xff0c;发现以下报错 原因分析&#xff1a; arguments 是参数的意思&#xff0c;该报错提示参数过多&#xff0c;意味着系统识别到了多余参数 本质原因&#xff1a;你的命令中输入了多余的 ”空格“ &#xff0c;检查一…

手写Spring第三篇番外,反射的基本使用

上一篇发出去之后&#xff0c;我有一个朋友说 beanDefinition.getBeanClass().newInstance() 这句代码太突兀了&#xff0c;就像是在甜甜的睡梦中&#xff0c;突然脚踩悬崖惊醒。 像我这种插朋友两刀的人必须安排了&#xff0c;不止安排 newInstance 还把反射基本用法也给安排了…

耳夹式耳机哪个品牌音质好?耳夹式蓝牙耳机排行榜!

当下&#xff0c;耳夹式蓝牙耳机愈发受到大众的青睐。不管是在上下班的途中、进行运动锻炼之时&#xff0c;还是休闲居家的日子里&#xff0c;这种耳机都能为使用者带来极为便捷的体验。不过&#xff0c;市面上的耳夹式蓝牙耳机品牌繁杂多样&#xff0c;产品品质也是良莠不齐&a…

【win10】VMware Workstation 16安装win10专业版及安装VMware Tools操作说明

参考链接 VMware虚拟机安装win10系统教程&#xff08;巨细&#xff09;_vmware安装win10-CSDN博客https://blog.csdn.net/gdidea/article/details/129523700 win10专业版安装说明 下载win10安装包 百度网盘 链接: https://pan.baidu.com/s/1kf4ORdXYgcqwAz2j86LSZw?pwdk4…

MySQL(八)——索引

文章目录 索引索引的数据结构索引的具体结构页的概念独立表空间文件页的结构页文件头和页文件尾页主体页目录数据页头 B树在索引中的应用索引分类按数据结构分按字段特性分按物理存储分按字段个数分 索引语法创建索引查看索引删除索引 索引优化SQL执行频率慢查询日志profile详情…

【机器学习导引】ch3-线性模型-2

优化理论&#xff1a;梯度下降&#xff08;Gradient Descent&#xff09; 梯度下降法的基本思路 梯度下降法是一种优化算法&#xff0c;目的是找到函数 f ( x ) f(x) f(x) 的最小值。图中提到“如果能找到一个序列 x 0 , x 1 , x 2 , … x_0, x_1, x_2, \dots x0​,x1​,x2​…

有手就会!低代码让你告别繁琐开发流程

近几年&#xff0c;随着低代码与无代码相关话题的火热&#xff0c;逻辑编排作为其重要构成部分也备受关注&#xff0c;集团内外不乏优秀的实践。之前在做技术调研时发现了不少业内逻辑编排相关的方案&#xff0c;陆续整理记录下来。今天先为大家带来低代码开发领域的 JNPF。 1.…

如何有效恢复受污染除砷树脂的功能?

在半导体制造领域&#xff0c;砷是一种常见的杂质元素。然而&#xff0c;砷的存在不仅会严重影响芯片的性能和可靠性&#xff0c;还会对生产环境和人体健康构成威胁。通过使用高效的除砷树脂&#xff0c;可以有效地去除水中的砷元素。 然而&#xff0c;一旦除砷树脂受到污染&am…

一个月学会Java 第10天 详讲static和面向对象——继承与Java世上最厉害的IDE——IDEA

Day10 详讲static和面向对象——继承与Java世上最厉害的IDE——IDEA 今天的篇幅会比较长&#xff0c;因为牵扯到不少的内容还有面向对象的内容 第一章 static 首先我们先来填一下坑&#xff0c;之前挖的&#xff0c;说后面要详细讲解static这个关键字的作用&#xff0c;那在这之…