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

最新推荐文章于 2024-07-30 11:11:00 发布

秦帝拿皇希首

最新推荐文章于 2024-07-30 11:11:00 发布

阅读量3k

点赞数

本文链接：https://blog.csdn.net/weixin_43189843/article/details/124006408

版权

表格组件 Ant Design Vue 数据验证实时提交 A-Table

关键词由CSDN通过智能技术生成

<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>