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

代码示例如下:

<!--  -->
<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>

效果图:

相关推荐
科技探秘人9 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人9 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR15 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香17 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969319 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai25 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc29 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_91534 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨3 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json