ant-design-vue Table+Form表单实现表格内置表单验证,可自定义验证规则,触发必填项

news2024/11/15 19:51:17

代码示例如下:

<!--  -->
<template>
  <a-button type="primary" style="padding-left: 10px; padding-right: 10px" @click="handleAddRow">
    <template #icon><plus-outlined /></template>新增
  </a-button>
  <a-form :model="dataSource" ref="AddModalForm" :labelCol="{ style: { width: '10px' } }">
    <a-table :dataSource="dataSource" :columns="columns" size="small" rowKey="id">
      <template #bodyCell="{ column, index, record }">
        <template v-if="column.dataIndex === 'nation'">
          <a-form-item label=" " name="nation" :rules="[{ required: true, message: '请输入名称,长度小于20字符', validator: () => customCheck(index, 'nation') }]">
            <a-input v-model:value="record.nation" placeholder="请输入国家(地区)名称" :maxlength="20" />
          </a-form-item>
        </template>
        <template v-if="column.dataIndex === 'code'">
          <a-form-item label=" " name="code" :rules="[{ required: true, message: '请输入名称,长度小于20字符', validator: () => customCheck(index, 'code'), trigger: 'blur' }]">
            <a-select v-model:value="record.code" style="width: 100%" :options="basicTypeOptions" :field-names="{ value: 'typeId', label: 'label' }"></a-select>
          </a-form-item>
        </template>
        <template v-if="column.dataIndex === 'desc'">
          <a-form-item>
            <a-input v-model:value="record.desc" placeholder="请输入描述" />
          </a-form-item>
        </template>
      </template>
    </a-table>
  </a-form>
  <a-button @click="handleOk">提交</a-button>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { FormInstance } from "ant-design-vue";
import { SelectProps } from "ant-design-vue";

const columns = [
  {
    title: "测试",
    dataIndex: "nation",
    width: 200,
  },
  {
    title: "测试A",
    dataIndex: "code",
    width: 200,
  },
  {
    title: "测试c",
    dataIndex: "desc",
    width: 200,
  },
];
// const useForm = Form.useForm;
const AddModalForm = ref<FormInstance>();
const basicTypeOptions = ref<SelectProps["options"]>([
  { typeId: "system_model_BasicDataType_Date", name: "日期", label: "date", nameSpace: "kld.core.basicDataType" },
  { typeId: "system_model_BasicDataType_Double", name: "小数", label: "Double", nameSpace: "kld.core.basicDataType" },
  { typeId: "system_model_BasicDataType_Text", name: "大文本", label: "largeText", nameSpace: "kld.core.basicDataType" },
  { typeId: "system_model_BasicDataType_String", name: "字符串", label: "string", nameSpace: "kld.core.basicDataType" },
  { typeId: "system_model_BasicDataType_Int", name: "整数", label: "int", nameSpace: "kld.core.basicDataType" },
]);
const visible = ref(false);
const dataSource = ref([{ nation: "", code: "", desc: "" }]);

/**
 * 新增一行空数据
 */
function handleAddRow() {
  dataSource.value.push({ nation: "", code: "", desc: "" });
}

async function handleOk() {
  try {
    await AddModalForm.value?.validateFields();
  } catch (errorInfo) {}
}
function show() {
  visible.value = true;
}
function hide() {
  visible.value = false;
}

defineExpose({ show, hide });

function customCheck(index: number, key: any) {
  if (dataSource.value[index][key]) {
    return Promise.resolve();
  }
  return Promise.reject();
}
</script>
<style lang="scss" scoped></style>

效果图:

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

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

相关文章

SOT23-6封装单键触摸感应触发芯片TC233A

前言&#xff1a; 触摸芯片很多&#xff0c;现在触摸按键已经应用到很多行业&#xff0c;虽然不能覆盖所有的按键&#xff0c;但确实用的越来越多&#xff0c;国产的价格也便宜的令人发指&#xff0c;比如这个TC233A&#xff0c;也就一毛多一点。 TC233A概述 TC233A 是一个单…

【机器学习入门】推导超级详细,一文讲清楚支持向量机(SVM)【从原理到代码】

支持向量机(SVM)是机器学习中非常经典的一个模型&#xff0c;所以我就把这个作为第二个深入学习的机器学习模型&#xff0c;然后发现居然还挺难的&#xff08;调包侠流下无能泪水&#xff09;。 参考了很多博客&#xff0c;但是大部分博客都是讲一部分&#xff0c;要么数学部分…

Java面试八股之Iterator接口和Iterable接口

1. Java为什么不直接实现Iterator接口&#xff0c;而是实现Iterable? 这道题算是一道比较基础的题&#xff0c;面试官肯定也不是想让回答得多深入&#xff0c;只是考查对迭代器的了解程度&#xff0c;最好是看过源码&#xff0c;实际上迭代器的源码并不难。我们把注释折叠起来…

gpt-6有望成为通用工具

OpenAI CEO山姆奥特曼&#xff08;Sam Altman&#xff09;在最新的博客访谈中&#xff0c;提到gpt-6有望成为通用工具。 奥特曼还认为&#xff0c;目前的模型不够聪明&#xff0c;“使用GPT-2进行科学研究曾被认为是不切实际的想法。而如今&#xff0c;虽然人们使用GPT-4进行科…

C++异常学习

C语言传统的处理错误的方式 传统的错误处理机制&#xff1a; 终止程序&#xff0c;如assert&#xff0c;缺陷&#xff1a;用户难以接受。如发生内存错误&#xff0c;除0错误时就会终止程序。返回错误码&#xff0c;缺陷&#xff1a;需要程序员自己去查找对应的错误。如系统的…

【基础】在GCC中编译和链接不是一个命令

在 GCC&#xff08;GNU Compiler Collection&#xff09;中&#xff0c;编译和链接不是一个命令。编译是将源代码转换为目标代码的过程。它主要进行语法检查、词法分析、生成中间代码等操作。链接是将多个目标文件和库文件组合成一个可执行文件的过程。在 GCC 中&#xff0c;通…

Root mapping definition has unsupported parameters: [all : {analyzer=ik_max_wor

你们好&#xff0c;我是金金金。 场景 我正在使用Springboot整合elasticsearch&#xff0c;在创建索引(分词器) 运行报错&#xff0c;如下 排查 排查之前我先贴一下代码 import org.elasticsearch.action.admin.indices.create.CreateIndexRequest; // 注意这个包SpringBootTe…

利用FFmpeg 转换课程vtt 字幕到 srt字幕

字幕转换工具 经常学习udemy 视频课程的&#xff0c;可能知道&#xff0c;从网络下载的udemy 课程文件里面有时候字幕是vtt 格式的&#xff0c;有时候想导入到百度网盘里面&#xff0c;怎奈百度网盘&#xff0c;不支持vtt 字幕格式。有字幕的时候&#xff0c;会比较好多了。既可…

Ollama、FastGPT大模型RAG知识库结合使用案例

参考: https://ollama.com/download/linux https://doc.fastai.site/docs/intro/ https://blog.csdn.net/m0_71142057/article/details/136738997 https://doc.fastgpt.run/docs/development/custom-models/m3e/ https://concise-eater-d47.notion.site/Ollama-Fastgpt-b170…

# 从浅入深 学习 SpringCloud 微服务架构(二)模拟微服务环境

从浅入深 学习 SpringCloud 微服务架构&#xff08;二&#xff09;模拟微服务环境&#xff08;1&#xff09; 段子手168 1、打开 idea 创建父工程 创建 artifactId 名为 spring_cloud_demo 的 maven 工程。 --> idea --> File --> New --> Project --> Ma…

树莓派使用总结

手上拿到了一块Raspberry Pi 4B板子。研究一下怎么用。 安装系统 直接到官网【Raspberry Pi 】下载在线安装助手 安装好后&#xff0c;打开软件&#xff0c;选择好板子型号、系统、TF卡&#xff0c;一路下一步就行。 树莓派接口 直接查看官方的资料【Raspberry Pi hardwar…

Docker Volume (存储卷)

什么是存储卷? 存储卷就是将宿主机的本地文件系统中存在的某个目录直接与容器内部的文件系统上的某一目录建立绑定关系。这就意味着&#xff0c;当我们在容器中的这个目录下写入数据时&#xff0c;容器会将其内容直接写入到宿主机上与此容器建立了绑定关系的目录。在宿主机上…

接口压力测试 jmeter--增强篇(二)

前期准备 1. JMeter的插件的安装 下载Jmeter Plugins Manager对插件进行管理 &#xff08;1&#xff09;下载地址&#xff1a;https://jmeter-plugins.org/install/Install/ &#xff08;2&#xff09;下载后&#xff0c;将jar包放到jmeter包目录下/lib/ext目录下 &#xff0…

绝对隔离+底层限制,成就猎鹰蜜罐“牢不可破”的立体化安全

前言 自网络诞生以来&#xff0c;攻击威胁事件层出不穷&#xff0c;网络攻防对抗已成为信息时代背景下的无硝烟战争。然而&#xff0c;传统的网络防御技术如防火墙、入侵检测技术等都是一种敌暗我明的被动防御&#xff0c;难以有效应对攻击者随时随地发起的无处不在的攻击和威胁…

MySQL学习笔记3——条件查询和聚合函数

条件查询和聚合函数 一、条件查询语句二、聚合函数1、SUM&#xff08;&#xff09;2、AVG()、MAX()、MIN()3、COUNT&#xff08;&#xff09; 一、条件查询语句 WHERE 和 HAVING 的区别&#xff1a; WHERE是直接对表中的字段进行限定&#xff0c;来筛选结果&#xff1b;HAVIN…

BUG:vue表单验证校验不报错,必填都有信息,就是不能正常往下进行

vue表单验证未报错却出现异常 框架bug场景解决办法 框架 UI&#xff1a;element-UI 前端&#xff1a;vue2 bug场景 正常表单里面&#xff0c;有的信息要求必填或者加了一些限制&#xff0c;作为校验验证&#xff0c;只有走到校验才会执行其他行为&#xff0c;比如调用保存接…

在 Linux 终端中创建目录

目录 ⛳️推荐 前言 在 Linux 中创建一个新目录 创建多个新目录 创建多个嵌套的子目录 测试你的知识 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站 前言 在本系列的这一部…

微服务之CircuitBreaker断路器

一、概述 1.1背景 在一个分布式系统中&#xff0c;每个服务都可能会调用其它的服务器&#xff0c;服务之间是相互调用相互依赖。假如微服务A调用微服务B和微服务C&#xff0c;微服务B和微服务C又调用其他的微服务。这就是构成所谓“扇出”。 如果扇出的链路上某个微服务的调…

【详细的Kylin使用心得】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

【任务调度】Apache DolphinScheduler快速入门

Apache DolphinScheduler基本概念 概念&#xff1a;分布式、去中心化、易扩展的可视化DAG工作流任务调度系统。 作用&#xff1a;解决数据处理流程中错综复杂的依赖关系&#xff0c;使调度系统在数据处理流程中开箱即用。Apache DolphinScheduler是一款开源的调度工具&#xff…