elmentui中的tabel嵌套表单input的校验

elementui组件中提供了一个动态增减表单项的一个检验，因为el-form-item是动态加载的，所以不能直接使用prop来绑定表单校验的rules属性，而是要使用动态prop，要遵循的规则是:prop="'tableData.' + index + '.字段名'"，再用rules属性指定对应校验规则
要实现tabel的表单校验，要使用动态prop+rules才能实现：

<template>
  <div class="container">
    <span>点击提交触发校验: </span>
    <el-button type="primary" @click="save()">提交</el-button>
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      class="demo-ruleForm"
      :rules="rules"
    >
      <el-table :data="form.tableData" border style="width: 100%">
        <el-table-column prop="name" label="姓名" width="350">
          <template slot-scope="scope">
            <el-form-item
              label=""
              :prop="'tableData.' + scope.$index + '.name'"
              :rules="rules['name']"
              label-width="0px"
            >
              <el-input
                v-model="scope.row.name"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="350">
          <template slot-scope="scope">
            <el-form-item
              label=""
              :prop="'tableData.' + scope.$index + '.age'"
              :rules="rules['age']"
              label-width="0px"
            >
              <el-input
                v-model="scope.row.age"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址">
          <template slot-scope="scope">
            <el-form-item
              label=""
              :prop="'tableData.' + scope.$index + '.address'"
              :rules="rules['address']"
              label-width="0px"
            >
              <el-input
                v-model="scope.row.address"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        tableData: [{
          name: '',
          age: '',
          address: ''
        }, {
          name: '',
          age: '',
          address: ''
        }],
      },
      rules: {
        name: [
          { required: true, message: '请选择姓名', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请选择年龄', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请选择地址', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('提交成功');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.el-button {
  margin-bottom: 20px;
}
.el-form-item {
  margin-bottom: 0px;
}
</style>

注：tabel中的每一项也是通过遍历出来的，所以要使用动态的prop
实现的效果如下：