需求：
vue3+elementPlus项目中，有一个业务需求，表单有一个模块可以实现新增和删除，前端使用v-for渲染，要求v-for动态渲染的表单也能实现输入校验。
实现方法与代码：
方法：在循环的el-form-item项根据index动态添加prop属性和rules属性
<template>
<div class="wrapper">
<div class="title">商品链接</div>
<el-form ref="applyFormRef" :model="applyForm" :rules="applyRules" label-position="top">
<div class="authorize-checkbox">
<template v-for="(item, index) in applyForm.orderLjItems" :key="index">
<el-form-item label="商品链接" :prop="`orderLjItems.${index}.goodsLink`" :rules="applyRules.goodsLink">
<el-input v-model="item.goodsLink" placeholder="输入该商品链接"></el-input>
</el-form-item>
</template>
</div>
<el-form-item label="填写理由" prop="reason">
<el-input
class="ipt-textarea"
type="textarea"
v-model="applyForm.reason"
placeholder="输入理由"
resize="none"
maxlength="200"
show-word-limit
/>
</el-form-item>
</el-form>
</div>
</template>
<script lang="ts">
export default {
name: 'lj-list'
}
</script>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { FormInstance, FormRules } from 'element-plus'
import type { ApplyLjReq } from '~/types/order-list'
const applyFormRef = ref<FormInstance>()
const applyForm = ref<ApplyLjReq>({
orderLjItems: [
{
goodsLink: ''
}
],
reason: ''
})
const applyRules = reactive<FormRules>({
goodsLink: [{ required: true, message: '请输入该商品链接', trigger: 'blur' }],
reason: [{ required: true, message: '请输入理由', trigger: 'blur' }]
})
</script>
