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、效果图