el-table插入表单并校验

el-table插入表单

先看一下效果图，点保存时，校验这一行。

代码如下：

<el-form ref="form" :rules="rules" :model="form">
  <el-table ref="table" border :data="form.tableData">
    <el-table-column align="center" width="160px" prop="materialRatio">
          <template align="center" slot="header">
            <p>
              材料收入分配（%)
              <span class="head-required">*</span>
            </p>
          </template>
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.materialRatio'"
              :rules="rules.materialRatio">
              <span v-show="scope.row.ifshow == false">{{
                scope.row.materialRatio}}</span>
              <el-input-number
                v-model="scope.row.materialRatio"
                size="mini"
                :controls="false"
                placeholder="请输入"
              ></el-input-number>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

校验单行

    validateField(form, index) {
            let result = true
            for (const item of this.$refs[form].fields) {
                if (item.prop.split('.')[1] === index.toString()) {
                    this.$refs[form].validateField(item.prop, (error) => {
                        if (error !== '') {
                            result = false
                        }
                    })
                }
                if (!result) break
            }
            return result
        },
   rowSave(row,index) {
      var i = this.validateField('form', index)
      if(i){
        console.log("校验通过")
      }else{
        return
      }
    },