ant-design-vue 可输入表格的校验方法

1、思路,首先用a-form包裹a-table,( 主要是name的取值问题,要严格按照['数据源',index,'校验的字段']来)

<a-form ref="form" :model="formData" :rules="rules">
   <a-table :dataSource="formData.tableList" :columns="columns" :pagination="false" bordered>
      <template #bodyCell="{ column, index, record }">
          <template v-if="column.key === 'copiesNumber'">
            <a-form-item :name="['tableList', index, 'copiesNumber']" :rules="rules.copiesNumber">
              <a-input v-model:value="record.copiesNumber" />
            </a-form-item>
          </template>
      </template>
   </a-table>
</a-form>



const formData = ref<any>({
    tableList: [],
  });

const rules = ref({
    copiesNumber: [{ required: true, message: '请输入数量', trigger: 'blur' }],
  });

const form = ref();
const submitSure = () => {
    form.value
      .validate()
      .then((values) => {
        console.log('验证通过,表单数据为:', values);
      })
      .catch((errorInfo) => {
        console.log('验证失败,错误信息为:', errorInfo);
      });
}

2、效果图

猜你喜欢

转载自blog.csdn.net/m0_62626838/article/details/142818966