ant-design-vue Table Form表单收集组件

效果

<!--  -->
<template>
  <a-modal v-model:visible="visible" title="新增国家（地区）" @ok="handleOk" width="1000px">
    <a-form :model="dataSource" ref="AddModalForm">
      <a-table :dataSource="dataSource" :columns="columns" size="small" :pagination="null" rowKey="id"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
        <template #headerCell="{ column }: any">
          <template v-if=" column.dataIndex === 'action' ">
            <a-button type="primary" style="padding-left:10px;padding-right:10px;" @click=" handleAddRow ">
              <template #icon><plus-outlined /></template>新增
            </a-button>
          </template>
        </template>
        <template #bodyCell=" { column, index, record }: any ">

          <template v-if=" column.dataIndex === 'nation' ">
            <a-form-item
              :rules=" [{ required: true, validator: () => customCheck(index, 'nation'), trigger: 'change' }] ">
              <a-input v-model:value=" record.nation " placeholder="请输入国家（地区）名称" />
            </a-form-item>
          </template>
          <template v-if=" column.dataIndex === 'code' ">
            <a-form-item name="code"
              :rules=" [{ required: true, validator: () => customCheck(index, 'code'), trigger: 'change' }] ">
              <a-input v-model:value=" record.code " placeholder="请输入国家（地区）编码" />
            </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 v-if=" column.dataIndex === 'action' ">
            <a-button type="link" danger @click=" handleDel(index) ">删除</a-button>
          </template>
        </template>
      </a-table>
    </a-form>
  </a-modal>
</template>

<script lang='ts' setup>
import {
    
     reactive, toRefs, ref, onMounted } from 'vue'
import {
    
     PlusOutlined } from '@ant-design/icons-vue'
import {
    
     columns } from "../columns";
import type {
    
     Rule } from 'ant-design-vue/es/form';
// import { Form } from 'ant-design-vue';

// const useForm = Form.useForm;

const AddModalForm = ref(null)
const visible = ref(false)
const dataSource = ref([
  {
    
     nation: '', code: '', desc: '' }
])


/**
 * 新增一行空数据
 */
function handleAddRow() {
    
    
  dataSource.value.push({
    
     nation: '', code: '', desc: '' })
}
/**
 * 
 * @param index 删除行的index
 */
function handleDel(index: number) {
    
    
  dataSource.value.splice(index, 1)
}
async function handleOk() {
    
    
  console.log(AddModalForm.value)
  AddModalForm.value.validateFields()
    .then((res) => {
    
    
      console.log('res', res)
    })
    .catch((err) => {
    
    
      console.error("校验失败", err)
    })
}
function show() {
    
    
  visible.value = true
}
function hide() {
    
    
  visible.value = false
}

defineExpose({
    
     show, hide })

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