rules: [
{ required: true, message: '请输入收货人联系电话' }
] },
addresseeAddressDetail: {
rules: [
{ required: true, message: '请输入收货地址详情' }
] }
},
columns: columns,
tableData: [{ id: 1, account: 123, area: 123, goodModelCount: 3434}, { id: 2, account: 123, area: 123, goodModelCount: 111}],
goodModelCountData: [] }
},
methods: {
getFildStatus(id) {
const data = this.goodModelCountData.filter(item => id === item.id)[0] if (data) {
return data
} else {
return {
errorMsg: '',
validateStatus: 'success'
}
}
},
handleChange(value, id) {
const newData = [...this.tableData];
const target = newData.filter(item => item.id === id)[0] if (target) {
const { errorMsg, validateStatus } = validatePrimeNumber(value)
let flag = true
this.goodModelCountData.forEach(val => {
if (val.id === id) {
flag = false
val.errorMsg = errorMsg,
val.validateStatus = validateStatus
}
})
if (flag) {
this.goodModelCountData.push({
id,
errorMsg,
validateStatus
})
}
target.goodModelCount = value
this.tableData = newData
}
},
handleOk() {
this.visible = false
}
}
}
</script>
重点注意两个属性:
validate-status 校验状态，可选 ‘success’, ‘warning’, ‘error’, ‘validating’
help 设置校验文案
在 vue 里面是允许我们在属性里面以 函数 的形式返回属性的,所以我们可以把验证规则放到函数里里面 validatePrimeNumber (函数名字最好还是语义化明确一些，我这边直接复制的官方文档上的)
需要进行验证的字段(需要在 a-table 标签内部)
<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>当我们输入框进行输入的时候我们就会出发 handleChange 方法，在方法里里面我们去进行输入内容的验证，然后根据id从 getFildStatus 找到当前对象，然后进行验证。
如果列表内有多列需要进行验证，那么就需要主要这个数据格式怎么定了了，根据实际需求进行参考
总结
