element-ui +Vue 解决 table 里包含表单验证

应用场景：
在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交，同时又需要对table的字段进行校验，效果如图所示：

这个校验中，最关键的问题在于如何给el-form-item 动态绑定prop。
:prop="'tableData.' + scope.$index + '.字段名'"

方法一：

<template>
  <div class="app-container">
    <el-form :model="fromData" ref="from" style="height: 500px">
      <el-table :data="fromData.domains"   height="100%">
        <el-table-column label="姓名">
          <template slot-scope="scope">
            <el-form-item :prop="'domains.'+scope.$index+'.name'" :rules="fromaDataRules.name">
              <el-input v-model="scope.row.name"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="地址">
          <template slot-scope="scope">
            <el-form-item :prop="'domains.'+scope.$index+'.desc'" :rules="fromaDataRules.desc">
              <el-input v-model="scope.row.desc"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-button type="warning" @click="submit('from')">submit</el-button>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        fromData:{
          domains:[
            {
              name: "小红",
              desc: "11123"
            },
            {
              name: "小红",
              desc: ""
            }
          ]
        },
        fromaDataRules:{
          name:[{ required: true, message: '请输入', trigger: 'blur' }],
          desc:[ { required: true, message: '请填写', trigger: 'blur' }]
        },

      }
    },
    mounted(){

    },
    methods:{


      submit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

上述代码中比较关键的部分有一下两点：
1、:prop="‘domains.’+scope.$index+’.name’" ，用于动态绑定prop到el-form-item；

2、this.$set(this.fromData,‘domains’,this.domains) ，用于为fromData设置domains这个节点。

方法二：

<template>
  <div class="app-container">

    <el-form :model="fromData" ref="from">
      <el-table :data="fromData.domains">
        <el-table-column label="姓名">
          <template slot-scope="scope">
            <el-form-item :prop="'domains.'+scope.$index+'.name'" :rules="fromData.fromaDataRules.name">
              <el-input v-model="scope.row.name"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="地址">
          <template slot-scope="scope">
            <el-form-item :prop="'domains.'+scope.$index+'.desc'" :rules="fromData.fromaDataRules.desc">
              <el-input v-model="scope.row.desc"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-button type="warning" @click="submit('from')">submit</el-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {

        fromData:{
          fromaDataRules:{
            name:[{ required: true, message: '请输入', trigger: 'blur' }],
            desc:[ { required: true, message: '请填写', trigger: 'blur' }]
          },
          domains:[],
        },
      }
    },
    mounted(){
      this.initDomains()
    },
    methods:{
      initDomains(){
        this.fromData.domains=[
          {
            name: "小红",
            desc: "11123"
          },
          {
            name: "小红",
            desc: "11123"
          }
        ]
      },
     
      submit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>