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

最新推荐文章于 2025-04-30 08:00:00 发布

柠檬加栤

最新推荐文章于 2025-04-30 08:00:00 发布

阅读量1.9k

点赞数 5

分类专栏： vue vue3 vue3基于Ant-Design-vue基础组件封装文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_57071129/article/details/137923712

版权

本文详细展示了如何在Vue应用中使用AntDesign库创建一个包含动态表单字段（如国家、代码和描述）的表格，并进行数据源管理和表单验证的代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码示例如下：

<!--  -->
<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') }]">