Vue+element的table列表校验，使用form+table组件嵌套实现

主要实现就是form嵌套table

下文代码提供两种rules的写法供参考

这里只写大体的东西 一些非必要的属性就省略以方便参考

 <el-form  :model="table" :rules="rules" ref="validForm">        //外壳form主要是校验
    <el-table :data="table.tableData" >                             //页面显示的列表
        <el-table-column label="显示标题">
          <template slot-scope="scope">     //table的插槽自定义写法详情看element官网自定义列表
            <el-form-item
              :prop="`tableData[${scope.$index}].title`" //这个是传递每个值用来校验 和rules一定要对应上
              :rules="rules.title">           //如果是固定的可以直接绑定rules里的规则
              <el-input  v-model="scope.row.title"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="显示标题">
          <template slot-scope="scope">
            <el-form-item
              :prop="`tableData[${scope.$index}].name`"
              :rules=""[
                { required: true, message: '请选择', trigger: 'blur' } //这里展示第二种rules写法 
              ]"> 
              <el-date-picker
                v-model="scope.row.name"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

     //下面就是正常的提交就可以触发校验了
     this.$refs.validForm.validate((valid)=>{
       if(vaild){}
     })