表格中的输入框验证

<template>
  <div>
    <el-form ref="form" :model="tableForm" :rules="tableForm.rules">
      <el-table :data="tableForm.tableData">
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column label="最小值">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.'+scope.$index+'.min'" :rules="tableForm.rules.min">
              <el-input v-model.number="scope.row.min"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="最大值">
          <template slot-scope="scope">
            <el-form-item :prop="`tableData.${scope.$index}.max`" :rules="tableForm.rules.max">
              <el-input v-model.number="scope.row.max"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      tableForm: {
        tableData: [
          {
            name: "名称1",
            min: "",
            max: ""
          },
          {
            name: "名称2",
            min: "",
            max: ""
          }
        ],
        rules: {
          min: [
            {
              type: "number",
              required: true,
              min: 1,
              max: 20,
              message: "数值范围1-20",
              trigger: "blur"
            }
          ],
          max: [
            {
              type: "number",
              required: true,
              min: 1,
              max: 20,
              message: "数值范围1-20",
              trigger: "blur"
            }
          ]
        }
      }
    };
  },

  methods: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},

  mounted() {}
};
</script>