實際業務需求場景： 新增或編輯頁面（基礎信息表單，一個數據列表的表單），數據列表里面的表單數是動態添加的。數據可新增、可刪除，在表單保存前，常常需要做表單必填項的校驗，校驗通過以后才去發請求保存表單數據。

1、效果圖

2、完整代碼實現

<template><ul class="violation-content"><li v-for="(item,index) in formData.tableData" :key="item.key"><div class="content-item"><el-form-item :prop="`tableData[${index}].name`"  :rules="{required: true, message: '請輸入', trigger: 'blur'}" label-width="1" style="margin-bottom: 0;"><el-input type="text" clearable placeholder="請輸入" v-model.trim="item.name"></el-input></el-form-item></div><div class="content-item"><span @click="delete(index)">刪除</span><el-button type="primary" v-if="index === (formData.tableData.length-1)" @click="add">添加</el-button></div></li></ul>
</template>
export default {data() {return {formData:{tableData: [],}};},created() {this.$set(this.formData, 'tableData', [{name: '', key: Date.now()}])}, methods: {add() {this.formData.tableData.push({name: '',key: Date.now()})},delete(index) {this.formData.tableData.splice(index, 1)},},
};
</script>

?注意：

重點！！！，因為是循環的，所以prop也要變成動態的了，要拼接上index，就變成根據索引去找對應的校驗項了，即為：:prop="'tableData.' + index + '.name'"?，這樣的話，就變成了：prop="tableData.0.name"、prop="tableData.1.name"、prop="tableData.2.name" ...?這樣的話，就可以綁定到每一項中的每一個綁定的值了，校驗就不會漏掉。

校驗規則寫成內聯就可以觸發校驗函數this.$refs["formData"].validate((val) => {})了