應(yīng)用場(chǎng)景：
在form表單內(nèi)，動(dòng)態(tài)生成一個(gè)數(shù)組類(lèi)型的一組數(shù)據(jù)，要求對(duì)生成的每一組數(shù)據(jù)內(nèi)容進(jìn)行表單驗(yàn)證。例如動(dòng)態(tài)添加人員，并對(duì)每個(gè)人的人員的信息輸入框進(jìn)行表單驗(yàn)證。

解決思路：
把rules的驗(yàn)證規(guī)則循環(huán)寫(xiě)在element ui的el-form-item的標(biāo)簽上，動(dòng)態(tài)綁定prop的值，使用index生成不同的prop來(lái)進(jìn)行動(dòng)態(tài)綁定。每次添加一個(gè)人員的時(shí)候，就是增加一個(gè)對(duì)象push到數(shù)組內(nèi)，進(jìn)行循環(huán)表單驗(yàn)證。

代碼實(shí)現(xiàn)：

  <div v-for="(data, index) in formData.dataArray" :key="index"><el-form-item class="custom-price" :prop="'dataArray.' + index + '.name'" :rules="rules.name"><el-input v-model="data.name"></el-input></el-form-item></div>

import { reactive, toRefs } from 'vue';const state = reactive({formData:{dataArray:[]},rules:{name: [{required: true, message: '此項(xiàng)目為必填項(xiàng)', trigger: 'change'}],}
})const { formData, rules } = toRefs(state);