Antdesign table nested input box, and the input box to do verification

<template>
  <div class="tableForm">
    <div style="width:1200px; margin:50px auto;">
      <a-table :columns="columns" :data-source="data">
        <a-form-model
          slot="wage"
          slot-scope="text,record"
          :ref="record.index"
          :model="record"
          :rules="rules"
          style="width:300px; height:40px"
        >
          <a-form-model-item prop="wage">
            <a-input style="width:100%" v-model="record.wage" />
          </a-form-model-item>
        </a-form-model>
        <span slot="action">
          <a>details</a>
        </span>
      </a-table>
    </div>

    <div style="margin-top:50px; overflow:hidden; text-align:center">
      <a-button @click="submit" size="large" type="primary">submit</a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tableForm'.data() {
    let validateWage = (rule, value, callback) = > {
      let reg = / ^ [+]? [0-9] + (\ [0-9] {1, 3})? $/
      if (value === ' ') {
        callback(new Error('Please enter a value'))}else if(! reg.test(value)) { callback(new Error('Please enter integer or decimal'))}else {
        callback()
      }
    }
    return {
      form: {},
      rules: {
        wage: [{ validator: validateWage, trigger: 'change'}},columns: [{title: 'name'.dataIndex: 'name'.key: 'name'.align: 'center'.scopedSlots: { customRender: 'name'}}, {title: 'wages'.dataIndex: 'wage'.width: '300px'.key: 'wage'.align: 'center'.scopedSlots: { customRender: 'wage'}}, {title: 'operation'.key: 'action'.align: 'center'.scopedSlots: { customRender: 'action'}}].data: [{key: 1.wage: ' '.name: 'Joe'.index: 'form1' },
        { key: 2.wage: ' '.name: 'Joe'.index: 'form2' },
        { key: 3.wage: ' '.name: 'Joe'.index: 'form3'}}},methods: {
    submit() {
      let submitFlag = false
      for (var key in this.$refs) {
        this.$refs[key].validate((valid) = > {
          if (valid) {
            // alert('submit! ')
          } else {
            submitFlag = true
            return false}})}if(! submitFlag) { alert('submit! ')}}}}</script>

<style lang="less" scoped>
</style>
Copy the code