实际业务需求场景： 新增或编辑页面（基础信息表单，一个数据列表的表单），数据列表里面的表单数是动态添加的。数据可新增、可删除，在表单保存前，常常需要做表单必填项的校验，校验通过以后才去发请求保存表单数据。

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) => {})了