ant-design-vue 实现表格内部字段验证功能
表格内column可输入的需求还是很常见的,尤其有一些业务场景就是表单内部有一个表格,然后表格的某些列是个进行输入的,就像下面这样
- 下单数量内容不能为空
- 下单数量必须输入正整数
翻阅ant-design-vue官网并没有发现说表单内表格字段验证的方案,但是有一个自行处理表单数据的介绍
那我们是不是可以参考这个方案去实现咱自己的业务需求呢,下面就开始说一下实现方案
重点注意两个属性:
- validate-status校验状态,可选‘success',‘warning',‘error',‘validating'
- help设置校验文案
在vue里面是允许我们在属性里面以函数的形式返回属性的,所以我们可以把验证规则放到函数里里面validatePrimeNumber(函数名字最好还是语义化明确一些,我这边直接复制的官方文档上的)
需要进行验证的字段(需要在a-table标签内部)
当我们输入框进行输入的时候我们就会出发handleChange方法,在方法里里面我们去进行输入内容的验证,然后根据id从getFildStatus找到当前对象,然后进行验证。
如果列表内有多列需要进行验证,那么就需要主要这个数据格式怎么定了了,根据实际需求进行参考
总结
以上所述是小编给大家介绍的ant-design-vue实现表格内部字段验证功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。