表格内 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: {
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>
重点注意两个属性:
在 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 找到当前对象，然后进行验证。
如果列表内有多列需要进行验证，那么就需要主要这个数据格式怎么定了了，根据实际需求进行参考
总结
以上所述是小编给大家介绍的ant-design-vue 实现表格内部字段验证功能，希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
JS 浅拷贝——Shallow copy 在 Canvas 绘图中的应用
网友评论