Elementui为表格内的每一行Input框添加表单验证

需求：为表格内的每一行input输入框添加表单验证（每行有多个input框）

效果：

html部分：

<el-form :model="forms" ref="forms" :rules="rules">
  <el-table ref="multipleTable" 
    :data="forms.tableData" 
    :height="tableHeight"
    stripe 
    style="width: 100%"
    :header-cell-style="thStyle"
    :cell-style="tdStyle">
    <el-table-column prop="ropeSkippingScore" label="跳绳成绩" min-width="115">
      <template slot-scope="scope">
        <el-form-item :prop="'tableData.'+scope.$index+'.ropeSkippingScore'" :rules="rules.ropeSkippingScore" v-if="scope.row.updated">
          <el-input v-model="scope.row.ropeSkippingScore" size="mini" placeholder="跳绳成绩"/>
        </el-form-item>
        <span v-if="!scope.row.updated">{{scope.row.ropeSkippingScore||'-'}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="ropeSkippingFraction" label="跳绳分数" min-width="115">
      <template slot-scope="scope">
        <el-form-item :prop="'tableData.'+scope.$index+'.ropeSkippingFraction'" :rules="rules.ropeSkippingFraction" v-if="scope.row.updated">
          <el-input v-model="scope.row.ropeSkippingFraction" align='center' size="mini" maxlength="5" placeholder="跳绳分数" @input="changeAllScore(scope.row)"/>
        </el-form-item>
        <span v-if="!scope.row.updated">{{scope.row.ropeSkippingFraction||'-'}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="chuckBallScore" label="实心球成绩" min-width="115">
      <template slot-scope="scope">
        <el-form-item :prop="'tableData.'+scope.$index+'.chuckBallScore'" :rules="rules.chuckBallScore" v-if="scope.row.updated">
          <el-input v-model="scope.row.chuckBallScore" size="mini" placeholder="实心球成绩"/>
        </el-form-item>
        <span v-if="!scope.row.updated">{{scope.row.chuckBallScore||'-'}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="chuckBallFraction" label="实心球分数" min-width="115">
      <template slot-scope="scope">
        <el-form-item :prop="'tableData.'+scope.$index+'.chuckBallFraction'" :rules="rules.chuckBallFraction" v-if="scope.row.updated">
          <el-input v-model="scope.row.chuckBallFraction" size="mini" maxlength="5" placeholder="实心球分数" @input="changeAllScore(scope.row)"/>
        </el-form-item>
          <span v-if="!scope.row.updated">{{scope.row.chuckBallFraction||'-'}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="langRunScore" label="长跑成绩" min-width="115">
      <template slot-scope="scope">
        <el-form-item :prop="'tableData.'+scope.$index+'.langRunScore'" :rules="rules.langRunScore" v-if="scope.row.updated">
          <el-input v-model="scope.row.langRunScore" size="mini" placeholder="长跑成绩"/>
        </el-form-item>
        <span v-if="!scope.row.updated">{{scope.row.langRunScore||'-'}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="langRunFraction" label="长跑分数" min-width="115">
      <template slot-scope="scope">
        <el-form-item :prop="'tableData.'+scope.$index+'.langRunFraction'" :rules="rules.langRunFraction" v-if="scope.row.updated">
          <el-input v-model="scope.row.langRunFraction" size="mini" maxlength="5" placeholder="长跑分数" @input="changeAllScore(scope.row)"/>
        </el-form-item>
        <span v-if="!scope.row.updated">{{scope.row.langRunFraction||'-'}}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" min-width="90" >
      <template slot-scope="scope">
        <el-button size="mini" @click="updated(scope)">{{scope.row.updated==true?'保存':'修改'}}</el-button>
      </template>
    </el-table-column>
  </el-table>
 </el-form>

data部分：

forms:{
 tableData: []   
	},
rules:{  //$rules是我自己封装的,这里rules可以按照elementui规则自己填写
  ropeSkippingScore:this.$rules.focusGrade, 
  ropeSkippingFraction:this.$rules.focusScore,
  chuckBallScore:this.$rules.focusGrade,
  chuckBallFraction:this.$rules.focusScore,
  langRunScore:this.$rules.focusGrade,
  langRunFraction:this.$rules.focusScore,
},

注意：
1.这里的el-form要在el-table的外面，且data中el-table的绑定数据tableData是forms对象里的
2.rules和prop要一一对应，比如 :prop="‘tableData.’+scope.$index+’.langRunScore’" 和:rules="rules.langRunScore"里的langRunScore是一致的

现在表格里就为每个input添加了表单验证，但是由于表格里添加了表单元素，原来的布局就会混乱，表格内的input框和同行内容不再对齐。我这里是通过el-table里的:cell-style="tdStyle"来调整含有input框的列的样式
代码：

tdStyle(val){
let col = val.columnIndex==7||val.columnIndex==8||val.columnIndex==9||val.columnIndex==10||val.columnIndex==11||val.columnIndex==12
  if(col&&val.row.updated==true){
    return "text-align:center;padding-bottom:0px;padding-top:12px"
  }
}

然后就是保存后校验所有input框
代码：

updated(scope) {   //切换保存、修改按钮
      let that = this
      let errorMessage = false  //判断验证项是否全部成功
      if (scope.row.updated) {
        let colIndex = ['tableData.'+scope.$index+'.ropeSkippingScore','tableData.'+scope.$index+'.ropeSkippingFraction',
        'tableData.'+scope.$index+'.chuckBallScore','tableData.'+scope.$index+'.chuckBallFraction',
        'tableData.'+scope.$index+'.langRunScore','tableData.'+scope.$index+'.langRunFraction']
    this.$refs['forms'].validateField(colIndex,(valid) => {
      if(valid!='') errorMessage = true  //有一个验证不成功就不在继续执行
    })
    if(!errorMessage){  //所有验证项均成功再执行后续代码
      that.changeScore(scope.row)
      this.$set(scope.row,'updated',false)
    }
  } else {
    that.$set(scope.row, 'updated', true) 
  }
},