ant design vue的表格嵌套表单加验证

代码

//html
    <a-form-model ref="tableformRef" :model="form">
      <a-table :columns="column" :data-source="form.list" :rowKey="(record)=>record.id" :pagination="false">
        <template slot="name" slot-scope="text, record,index">
          <a-form-model-item :prop="'list.'+index+'.name'" :rules="rules.name">
            <a-input v-model="record.name"></a-input>
          </a-form-model-item>
        </template>
        <template slot="sex" slot-scope="text, record,index">
          <a-form-model-item :prop="'list.'+index+'.sex'" :rules="rules.sex">
            <a-select v-model="record.sex">
              <a-select-option value="1">男</a-select-option>
              <a-select-option value="2">女</a-select-option>
            </a-select>
          </a-form-model-item>
        </template>
        <template slot="age" slot-scope="text, record,index">
          <a-form-model-item :prop="'list.'+index+'.age'" :rules="rules.age">
            <a-input-number v-model="record.age"></a-input-number>
          </a-form-model-item>
        </template>
        <template slot="level" slot-scope="text, record,index">
          <a-form-model-item :prop="'list.'+index+'.level'" :rules="rules.level">
            <a-select v-model="record.level">
              <a-select-option :value="1">男</a-select-option>
              <a-select-option :value="2">女</a-select-option>
            </a-select>
          </a-form-model-item>
        </template>
      </a-table>
      <a-form-model-item>
        <a-button @click="handleSubmit">提交</a-button>
      </a-form-model-item>
    </a-form-model>
    //js
    export default {
  data () {
    const validatorAge = (rule, value, callback) => {
      if (!value) {
        callback(new Error('年龄不能为空'))
      } else if (value < 20 || value > 50) {
        callback(new Error('年龄输入错误'))
      } else callback()
    }
    return {
      form: {
        list: [
          { id: '1', name: '唐僧', sex: '1', age: '35', level: 1, describe: '他是师傅' },
          { id: '2', name: '孙悟空', sex: '2', age: '20', level: 2, describe: '他是大师兄' },
          { id: '3', name: '沙和尚', sex: '1', age: '30', level: 4, describe: '他是三师弟' },
          { id: '4', name: '猪八戒', sex: '2', age: '33', level: 3, describe: '他是猪八戒' }
        ]
      },
      rules: {
        name: { required: true, message: '姓名不能为空' },
        sex: { required: true, message: '性别不能为空' },
        age: [
          { required: true, validator: validatorAge }
        ],
        level: { required: true, message: '等级不能为空' }
      },
      column: [
        {
          title: '姓名',
          key: 'name',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '性别',
          key: 'sex',
          scopedSlots: { customRender: 'sex' }
        },
        {
          title: '年龄',
          key: 'age',
          scopedSlots: { customRender: 'age' }
        },
        {
          title: '等级',
          key: 'level',
          scopedSlots: { customRender: 'level' }
        },
        {
          title: '描述',
          key: 'describe',
          dataIndex: 'describe'
        }
      ]
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.tableformRef.validate(async valid => {
        if (valid) {
          this.$message.success('提交成功')
        }
      })
    }
  }
}

更多可以查看https://blog.csdn.net/iamlujingtao/article/details/105186117