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

4,835 阅读1分钟

form.png

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