antdesign的表格里嵌套输入框，并对输入框做校验

Posted 2023-03-15

参考技术A <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>详情</a>

        </span>

      </a-table>

    </div>

    <div style="margin-top:50px;overflow:hidden;text-align:center">

      <a-button @click="submit" size="large" type="primary">提交</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('请输入值'))

      else if (!reg.test(value))

        callback(new Error('请输入整数或小数'))

      else

        callback()

     

   

    return

      form: ,

      rules:

        wage: [ validator: validateWage, trigger: 'change' ]

      ,

      columns: [

       

          title: '姓名',

          dataIndex: 'name',

          key: 'name',

          align: 'center',

          scopedSlots: customRender: 'name'

        ,

       

          title: '工资',

          dataIndex: 'wage',

          width: '300px',

          key: 'wage',

          align: 'center',

          scopedSlots: customRender: 'wage'

        ,

       

          title: '操作',

          key: 'action',

          align: 'center',

          scopedSlots: customRender: 'action'

       

      ],

      data: [

        key: 1, wage: '', name: '张三', index: 'form1' ,

        key: 2, wage: '', name: '张三', index: 'form2' ,

        key: 3, wage: '', name: '张三', 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>