Vue组件中通过v-for循环动态生成form表单进行表单校验

在做项目时，需要根据需要动态添加或新增表单，同时还需要对表单做校验。详情如下图：

刚开始做表单验证的时候，对于这个动态的表单验证有点难搞，试了好几种方法都没有搞定。最后按照下面这种方法实现了，以此篇博客留作记录，方便下次遇到类似的需求时直接开发。

<a-form :model="warnData" ref="warnDataRef" :rules="rules" :label-col="labelCol">
	<div class="title">
    	<strong>环保运营班长</strong>
     	<a-button class="btn" @click="addItem('monitor')" size="small">新增</a-button>
     	<a-row v-for="(item, index) in warnData.monitorInfoList" :key="index">
     		<a-col :span="10">
            	<a-form-item label="姓名" :name="['monitorInfoList', index, 'workName']" :rules="[{required: true, message: '请输入姓名', trigger: 'blur'}]">
                	<a-input v-model:value.trim="item.workName" />
                </a-form-item>
             </a-col>
             <a-col :span="10">
                    <a-form-item label="工号" :name="['monitorInfoList', index, 'workId']" :rules="[{required: true, message: '请输入工号', trigger: 'blur'}]" style="display: flex; flex-wrap: nowrap">
                    	<a-input v-model:value.trim="item.workId" />
                            <a-button @click="delMonitor(index)" type="link">删除</a-button>
                    </a-form-item>
             </a-col>
     	</row>
 	</div>
</a-form>