表格内 column 可输入的需求还是很常见的，尤其有一些业务场景就是表单内部有一个表格，然后表格的某些列是个进行输入的，就像下面这样
下单数量 内容不能为空
下单数量 必须输入正整数
翻阅 ant-design-vue 官网并没有发现说表单内表格字段验证的方案，但是有一个 自行处理表单数据 的介绍
那我们是不是可以参考这个方案去实现咱自己的业务需求呢，下面就开始说一下实现方案
<a-table
:columns="columns"
bordered
:rowKey="col => col.id"
:dataSource="tableData"
> <a-form-item
:label-col="{
xs: { span: 0 },
sm: { span: 0 },
}"
:wrapper-col="{
xs: { span: 24 },
sm: { span: 24 },
}"
:validate-status="getFildStatus(record.id).validateStatus"
:help="getFildStatus(record.id).errorMsg"
slot="goodModelCount"
slot-scope="text, record">
<a-input
style="width: 100%"
:min="1"
v-model="text.goodModelCount"
@change="handleChange(text.goodModelCount, record.id)"
/>
</a-form-item>
<div slot="action" slot-scope="text, record">
<a href="javascript:;" rel="external nofollow" ><a-icon type="delete" /></a>
</div>
</a-table>
<script>
const columns = [
{ title: '商品名称', dataIndex: 'id', align: 'center' },
{ title: '商品型号', dataIndex: 'account', align: 'center' },
{ title: '型号价格', dataIndex: 'area', align: 'center' },
{ title: '下单数量', key: 'goodModelCount', align: 'center', width: '200px', scopedSlots: { customRender: 'goodModelCount' }, align: 'center', },
{ title: '操作', scopedSlots: { customRender: 'action' }, width: '150px', align: 'center',}
]
function validatePrimeNumber(number) {
if (/^[1-9]d*|0$/.test(number)) {
return {
validateStatus: 'success',
errorMsg: '',
};
}
return {
validateStatus: 'error',
errorMsg: '下单数量不能为空',
};
}
export default {
name: 'order-dialog',
data() {
return {
visible: true,
labelCol: {
xs: { span: 24 },
sm: { span: 7 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
},
form: this.$form.createForm(this),
validatorRules: {
consigneeName: {
rules: [
{ required: true, message: '请输入收货人姓名' }
] },
consigneePhone: {
