【Vue】【Element】在表格表单中，不同行进行不同校验

目标：如图所示，每行根据不同的返回数据，最大值不同，获取数据如下json

// 模拟数据
[
  {
    id: 1,
    name: '',
    num: 0,
    max: 10
  },
  {
    id: 2,
    name: '',
    num: 0,
    max: 14
  }
]

代码

<template>
  <div>
    <el-form ref="ruleForm">
      <el-table
        ref="multipleTable"
        v-adaptive
        :data="list"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        height="100"
        border
        fit
        highlight-current-row
      >
        <el-table-column align="center" prop="name" label="名称">
          <template scope="scope">
            <el-form-item prop="name">
              <el-input v-model="scope.row.name"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="num" label="数量">
          <template scope="scope">
            <el-form-item prop="num" :rules="[{ validator: (_1, _2, c) => customCcheck(scope.row.num, c, scope.row), trigger: 'blur' }]">
              <el-input v-model="scope.row.num"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
const data = [
  {
    id: 1,
    name: '',
    num: 0,
    max: 10
  },
  {
    id: 2,
    name: '',
    num: 0,
    max: 14
  }
]

export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    this.list = [...data]
  },
  methods: {
    /**
     * 自定义校验
     */
    customCcheck(b, c, item) {
      console.log(b, item)
      if (b > item.max) c('不能超过最大值')
      else c()
    }
  }
}
</script>