el-table嵌套表单项校验

例子1：

例子1.png

// 数据结构
form: {
    // 下面就是主角
        roleAwardROList: [{
          awardRuleDetailROList: [
            {
              awardMoney: '',
              level: 1,
              salesAmount: ''
            }],
          shopType: 0
        }],
}

// dom结构
<el-form ref="form" :model="form" :rules="rules">
          <el-table :data="form.roleAwardROList" style="margin-bottom: 20px" v-if="isShow">
            <el-table-column label="第一栏内容">
              <template slot-scope="scope">
                {{['第一行', '第二行', '第三行'][scope.row.shopType]}}
              </template>
            </el-table-column>
            <el-table-column :label="第一档" align="center">
              <el-table-column :label="销售额" min-width="120" align="center">
                <template slot-scope="scope">
                  <el-form-item 
                    :prop="`roleAwardROList.${scope.$index}.awardRuleDetailROList.0.salesAmount`" 
                    :rules="{required: true, message: '请输入正整数', pattern: /^\+?[1-9]\d*$/, trigger: 'blur'}">
                    <el-input v-model.trim="scope.row.awardRuleDetailROList[0].salesAmount"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="奖励" min-width="120" align="center">
                <template slot-scope="scope">
                  <el-form-item 
                    :prop="`roleAwardROList.${scope.$index}.awardRuleDetailROList.0.awardMoney`" 
                    :rules="{required: true, message: '请输入正整数', pattern: /^\+?[1-9]\d*$/, trigger: 'blur'}">
                    <el-input v-model.trim="scope.row.awardRuleDetailROList[0].awardMoney"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="第二档" align="center" v-if="currentLevel > 1">
              <el-table-column :label="销售额" min-width="120" align="center">
                <template slot-scope="scope">
                  <el-form-item
                    :prop="`roleAwardROList.${scope.$index}.awardRuleDetailROList.1.salesAmount`" 
                    :rules="{required: true, message: '请输入正整数', pattern: /^\+?[1-9]\d*$/, trigger: 'blur'}">
                    <el-input v-model.trim="scope.row.awardRuleDetailROList[1].salesAmount"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="奖励(元)" min-width="120" align="center">
                <template slot-scope="scope">
                  <el-form-item 
                    :prop="`roleAwardROList.${scope.$index}.awardRuleDetailROList.1.awardMoney`" 
                    :rules="{required: true, message: '请输入正整数', pattern: /^\+?[1-9]\d*$/, trigger: 'blur'}">
                    <el-input v-model.trim="scope.row.awardRuleDetailROList[1].awardMoney"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="第三档" align="center" v-if="currentLevel > 2">
              <el-table-column :label="销售额" min-width="120" align="center">
                <template slot-scope="scope">
                  <el-form-item 
                    :prop="`roleAwardROList.${scope.$index}.awardRuleDetailROList.2.salesAmount`" 
                    :rules="{required: true, message: '请输入正整数', pattern: /^\+?[1-9]\d*$/, trigger: 'blur'}">
                    <el-input v-model.trim="scope.row.awardRuleDetailROList[2].salesAmount"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="奖励(元)" min-width="120" align="center">
                <template slot-scope="scope">
                  <el-form-item 
                    :prop="`roleAwardROList.${scope.$index}.awardRuleDetailROList.2.awardMoney`" 
                    :rules="{required: true, message: '请输入正整数', pattern: /^\+?[1-9]\d*$/, trigger: 'blur'}">
                    <el-input v-model.trim="scope.row.awardRuleDetailROList[2].awardMoney"></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>

例子2：

例子2.png

//数据结构：
energyROS: [
          {
            energyLevel: '1',
            energyVolume: '0'
          },
          {
            energyLevel: '2',
            energyVolume: ''
          },
          {
            energyLevel: '3',
            energyVolume: ''
          },
          {
            energyLevel: '4',
            energyVolume: ''
          },
          {
            energyLevel: '5',
            energyVolume: ''
          },
          {
            energyLevel: '6',
            energyVolume: ''
          }
        ]
// dom
<el-table :data="ruleForm.energyROS" style="width: 600px" border>
          <el-table-column prop="energyLevel" label="第一列">
            <template slot-scope="scope">
              <span v-if="scope.row.energyLevel == 1">Lv.1</span>
              <span v-if="scope.row.energyLevel == 2">Lv.2</span>
              <span v-if="scope.row.energyLevel == 3">Lv.3</span>
              <span v-if="scope.row.energyLevel == 4">Lv.4</span>
              <span v-if="scope.row.energyLevel == 5">Lv.5</span> 
              <span v-if="scope.row.energyLevel == 6">Lv.6</span>               
            </template>
          </el-table-column>
          <el-table-column prop="energyVolume" label="数字列">             
            <template slot-scope="scope">
              <el-form-item :prop="`energyROS.${scope.$index}.energyVolume`"
                :rules="{required:true,validator:validateEnergyVolume,trigger:'blur'}">
              <el-input v-model="scope.row.energyVolume" :disabled="scope.$index == 0" step='100' placeholder="请输入100,000,000以内的整数"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
        
        
// 写在method：
validateEnergyVolume(rule, value, callback) {
      // console.log('rule', rule)
      // console.log('value', value)
      if (rule.field === 'energyROS.0.energyVolume') {
        callback() // 第一行不校验
        return
      }
      if (!/^\+?[1-9]\d*$/.test(value)) {
        callback(new Error('请填写100,000,000以内的整数'))
        return
      }
      if (value > 100000000 || value < 0) {
        callback(new Error('请填写100,000,000以内的整数'))
        return
      }
      if (value % 100 !== 0) {
        callback(new Error('请输入100的整倍数'))
        return
      }
      callback()
    }