element含可编辑表格的表单自定义校验

需求： 可编辑表格 添加 自定义校验
原料：el-form el-table rules
直接上代码
HTML

 <el-form :rules="rules"  ref="ruleForm" :model="ruleForm" >
              <el-table :data="ruleForm.tableData" height="25vh" style="width: 100%;margin-top:2vh" stripe  ref="transcriptTable"
                        :header-cell-style="{color:'#00DEFF',fontFamily:'FZZhengHeiS-EB-GB',fontSize:this.fitChartSize(24),fontWeight:400}">
                  <el-table-column  label="序号" type='index' width='70' align="center"></el-table-column>
                  <el-table-column  label="基础信息" :min-width=this.fitChartSize(100) align="center">
                    <el-table-column prop="1" label="lable1" :min-width=this.fitChartSize(120) align="center"></el-table-column>
                    <el-table-column prop="2" label="label2" :min-width=this.fitChartSize(100) align="center"></el-table-column>
                    <el-table-column prop="3"  label="" :min-width=this.fitChartSize(100) align="center">
                         <template slot="header" >
                            <i class="el-icon-edit"></i>  水位min(m)
                         </template>
                         <template  slot-scope="scope"  >
                             <el-form-item label="" class="tableInput" 
                              :rules="rules.level"
                               :prop="`tableData[${scope.$index}].3`"   >        
                               <el-input class="center" type="text"  oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入" v-model="scope.row[3]" />
                             </el-form-item>
                         </template>
                    </el-table-column>                                                            
                    <el-table-column prop="4" label="" :min-width=this.fitChartSize(100) align="center">
                          <template slot="header" >
                            <i class="el-icon-edit"></i>  水位max(m)
                          </template>
                        
                         <template  slot-scope="scope"  >
                             <el-form-item label="" class="tableInput" 
                              :rules="rules.level2"
                              :prop="`tableData[${scope.$index}].4`"  >        
                               <el-input class="center" type="text"  oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入" v-model="scope.row[4]" />
                             </el-form-item>
                         </template> 
                    </el-table-column>                                                            
                    <el-table-column prop="5" label="" :min-width=this.fitChartSize(100) align="center">
                       <template slot="header" >
                            <i class="el-icon-edit"></i>  权重(0~1)
                       </template>
                       <template  slot-scope="scope"  >
                             <el-form-item label="" class="tableInput" 
                              :prop="`tableData[${scope.$index}].5`"
                              :rules="rules.quanzhong"
                                >        
                               <el-input class="center" type="text"  oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入" v-model="scope.row[5]" />
                             </el-form-item>
                         </template>
                    </el-table-column>                                                            
                  </el-table-column>  
                  <el-table-column prop="v" label="初始参数" :min-width=this.fitChartSize(100) align="center">
                      <el-table-column prop="6" label="" :min-width=this.fitChartSize(100) align="center">
                          <template slot="header" >
                            <i class="el-icon-edit"></i>  开始h
                          </template>
                          <template  slot-scope="scope"  >
                             <el-form-item label="" class="tableInput" 
                             :prop="`tableData[${scope.$index}].6`"
                              :rules="rules.level3" >        
                               <el-input class="center" type="text"  oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入" v-model="scope.row[6]" />
                             </el-form-item>
                         </template>
                      </el-table-column>
                  </el-table-column>                                                          
            
              </el-table>
        </el-col>
        <el-col :span="6" style="padding-left:1vh" class="prediction  param" >
            <fieldset class="out" >
              <legend class="title" >初始参数</legend>
              <el-form-item label="总量:"   prop="flow"     >
                  <el-input oninput="value=value.replace(/[^0-9.]/g,'')" v-model.trim="ruleForm.flow" class="specile" >    
                    <template slot="append">万方</template>
                  </el-input>
              </el-form-item>
              <el-form-item label="总时:"   prop="time"    >
                  <el-input oninput="value=value.replace(/[^0-9.]/g,'')" v-model.trim="ruleForm.time" class="specile" >    
                    <template slot="append">小时</template>
                  </el-input>
              </el-form-item>
              <el-button class="buttonStyle" style="margin-top:3vh" @click="Analyse()" >开始分析 </el-button>
          </fieldset>
      </el-form>  

data:

anyliseTable:[],
    rules:{
         level: [
            { required: true, message: '', trigger: 'blur' }
          ],
           level2: [
            { required: true, message: '', trigger: 'blur' }
          ],
           level3: [
            { required: true, message: '', trigger: 'blur' }
          ],
           flow: [
            { required: true, message: '', trigger: 'blur' }
          ],
           time: [
            { required: true, message: '', trigger: 'blur' }
          ],
         quanzhong:[
           { validator: checkQuanZhong, trigger: "blur" }] 
      }
        //自定义权重验证规则
    let checkQuanZhong = (rule, value, callback) => {
        if (value == null || value == undefined || value === "") {
           return callback(new Error());
        }else{
          if( value < 0 || value > 1 ){
             return callback(new Error());
          }else{
            return  callback();
          }
        }
    };

js

 this.$refs.ruleForm.validate( vaild => {
     if(vaild){}
     })

说明：1. 后台 返回的table数据 [ [1,2,3,4,5,6,7],[xxxxxx] ] 所以prop 是用的 0 1 2 3 4
2.关键代码

 <el-table-column prop="4" label="" :min-width=this.fitChartSize(100) align="center">
                         //自定义表格列头
                          <template slot="header" >
                            <i class="el-icon-edit"></i>  最高水位(m)
                          </template>
                         <template  slot-scope="scope"  >
                             <el-form-item label="" class="tableInput" 
                              :rules="rules.level2"
                              :prop="`tableData[${scope.$index}].4`"  >        
                               <el-input class="center" type="text"  oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入" v-model="scope.row[4]" />
                             </el-form-item>
                         </template> 
                    </el-table-column> 

其实 :rules=“rules.level2” :prop=“tableData[${scope.$index}].4” 关键就这点 其他和平时用的一样
上面 权重 那一列 用的是那个 自定义校验。