arcoDesign组件库 a-form表单嵌套a-table可编辑表格校验

<template> 
    <a-form ref="form" :model="fromData">
      <a-table :columns="columns" :data="fromData.tableData">
          <template #name="{ record, rowIndex }">
                <a-form-item :field="`tableData[${rowIndex}].name`" label="名称" :rules="[{ required: true, message: '请输入名称' }]">
                     <a-input v-model="record.name" placeholder="请输入名称" allow-clear />
                </a-form-item>
            </template>
       </a-table>
      <a-form-item>
        <a-button @click=handleSubmit()>Submit</a-button>
      </a-form-item>
    </a-form>
</template>


<script setup lang="ts">
import { ref } from "vue
    const form = ref<any>();
    const fromData = ref({
    tableData:[
        {name:'',age:''},
        {name:'',age:''}]
    });

      const columns = [
      {
        title: 'Name',
        slotName: 'name',
      },
      {
        title: 'Age',
        dataIndex: 'age',
      },
     
    ];

    const handleSubmit= () => {
     (form.value as any)?.validate((valid: any) => {
            if (valid) {
                Message.error(`请完善基本信息表单`);
            } else {
                 console.log(fromData.value)
            }
        });
    }
</script>