ant design vue中form表单校验数组必填

效果如下：

1、form表单是纯数组时的情况

<template>
	<div>
		<Form
		   ref="formRef"
		   name="advanced_search"
		   class="ant-advanced-search-form"
		   :model="formState"
		 >
		   <table class="my-table">
		     <tr>
		       <td colspan="6" class="tableTitle">报告解读建议</td>
		     </tr>
		     <tr>
		       <td class="label">姓名</td>
		       <td>张三</td>
		       <td class="label">性别</td>
		       <td>男</td>
		       <td class="label">年龄</td>
		       <td>30岁</td>
		     </tr>
		     <tr>
		       <td class="label">体检年度</td>
		       <td colspan="5">2023年</td>
		     </tr>
		     <tr>
		       <td class="label">体检日期</td>
		       <td colspan="5">2023年07月01日</td>
		     </tr>
		     <tr>
		       <td class="label">体检机构</td>
		       <td colspan="5">西安曲江分院</td>
		     </tr>
		     <tr>
		       <td class="label" colspan="2">解读项目</td>
		       <td class="label" colspan="4">解读建议</td>
		     </tr>
		
			// 重点部分
		     <tr v-for="(item, index) in formState" :key="index">
		       <td colspan="2">
		         <FormItem
		         	// 重点部分
		           :name="[index, 'name']"
		           :rules="[{ required: true, message: '请输入', trigger: 'blur', }]"
		         >
		           <Textarea
		             :rows="3"
		             placeholder="请输入"
		             :maxlength="500"
		             :showCount="false"
		             v-model:value="item.name"
		             @blur="handleBlur"
		           ></Textarea>
		         </FormItem>
		       </td>
		       <td colspan="3">
		         <FormItem
		         	// 重点部分
		           :name="[index, 'content']"
		           :rules="[{ required: true, message: '请输入解读内容', trigger: 'blur', }]"
		         >
		           <div class="flex">
		             <Textarea
		               :rows="3"
		               placeholder="请输入解读内容"
		               :showCount="false"
		               v-model:value="item.content"
		               @blur="handleBlur"
		             ></Textarea>
		           </div>
		         </FormItem>
		       </td>
		       <td width="90">
		         <div class="operate-btns flex">
		           <!-- 添加 -->
		           <i class="icon iconfont" @click="addFunc" style="color: #2a5eb7;">&#xe657;</i>
		           <!-- 删除 -->
		           <i v-if="formState.length > 1" class="icon iconfont" style="color: red;" @click="delFunc(index)">&#xe8b6;</i>
		         </div>
		       </td>
		     </tr>
		   </table>
		 </Form>
		 
		 <!-- 操作按钮 -->
		 <div class="btns">
		   <Button type="primary" @click="sendGuideFunc">发送</Button>
		   <Button type="primary" @click="closeReportInterpretFunc">取消</Button>
		 </div>
	</div>
</template>

<script lang="ts" setup>
const formState = ref([
  {
    name: '',
    content: ''
  }
]);
const formRef = ref();
// 发送报告解读
const sendGuideFunc = () => {
 // form表单校验
 formRef.value
   .validate()
   .then(() => {
   
   })
   .catch(error => {
     console.log('error', error);
   });
}
</script>

2、form表单中某个字段是数组时的情况

<template>
	<div>
		<Form
		   ref="formRef"
		   name="advanced_search"
		   class="ant-advanced-search-form"
		   :model="formState"
		 >
		   <table class="my-table">
		     <tr>
		       <td colspan="6" class="tableTitle">报告解读建议</td>
		     </tr>
		     <tr>
		       <td class="label">姓名</td>
		       <td>张三</td>
		       <td class="label">性别</td>
		       <td>男</td>
		       <td class="label">年龄</td>
		       <td>30岁</td>
		     </tr>
		     <tr>
		       <td class="label">体检年度</td>
		       <td colspan="5">2023年</td>
		     </tr>
		     <tr>
		       <td class="label">体检日期</td>
		       <td colspan="5">2023年07月01日</td>
		     </tr>
		     <tr>
		       <td class="label">体检机构</td>
		       <td colspan="5">西安曲江分院</td>
		     </tr>
		     <tr>
		       <td class="label" colspan="2">解读项目</td>
		       <td class="label" colspan="4">解读建议</td>
		     </tr>
		
         	// 重点部分
		     <tr v-for="(item, index) in formState.list" :key="index">
		       <td colspan="2">
		         <FormItem
		         	// 重点部分
		           :name="['list', index, 'name']"
		           :rules="[{ required: true, message: '请输入', trigger: 'blur', }]"
		         >
		           <Textarea
		             :rows="3"
		             placeholder="请输入"
		             :maxlength="500"
		             :showCount="false"
		             v-model:value="item.name"
		             @blur="handleBlur"
		           ></Textarea>
		         </FormItem>
		       </td>
		       <td colspan="3">
		         <FormItem
		         	// 重点部分
		           :name="['list', index, 'content']"
		           :rules="[{ required: true, message: '请输入解读内容', trigger: 'blur', }]"
		         >
		           <div class="flex">
		             <Textarea
		               :rows="3"
		               placeholder="请输入解读内容"
		               :showCount="false"
		               v-model:value="item.content"
		               @blur="handleBlur"
		             ></Textarea>
		           </div>
		         </FormItem>
		       </td>
		       <td width="90">
		         <div class="operate-btns flex">
		           <!-- 添加 -->
		           <i class="icon iconfont" @click="addFunc" style="color: #2a5eb7;">&#xe657;</i>
		           <!-- 删除 -->
		           <i v-if="formState.length > 1" class="icon iconfont" style="color: red;" @click="delFunc(index)">&#xe8b6;</i>
		         </div>
		       </td>
		     </tr>
		   </table>
		 </Form>
		 
		 <!-- 操作按钮 -->
		 <div class="btns">
		   <Button type="primary" @click="sendGuideFunc">发送</Button>
		   <Button type="primary" @click="closeReportInterpretFunc">取消</Button>
		 </div>
	</div>
</template>

<script lang="ts" setup>
const formState = ref({
	list: [
	  {
	    name: '',
	    content: ''
	  }
	]
});
const formRef = ref();
// 发送报告解读
const sendGuideFunc = () => {
 // form表单校验
 formRef.value
   .validate()
   .then(() => {
   
   })
   .catch(error => {
     console.log('error', error);
   });
}
</script>