介绍 <李> & lt;一个表
,:列=癱olumns"
,与
,:rowKey=癱ol =祝辞,col.id"
,:数据源=皌ableData"
比;
,& lt; a-form-item
,,:label-col=皗
,,,xs:{,跨度:0,},
,,,sm:{,跨度:0,},
}“才能;
,,:wrapper-col=皗
,,,xs:{,跨度:24,},
,,,sm:{,跨度:24,},
}“才能;
,,:validate-status=癵etFildStatus (record.id) .validateStatus"
:才能帮助=癵etFildStatus (record.id) .errorMsg"
槽才能=癵oodModelCount",
slot-scope=拔谋?才能,record"比;
& lt; a-input才能
,,
,,:min=?”;
,,v模型=皌ext.goodModelCount"
,,@change=癶andleChange (text.goodModelCount, record.id)“;/才能比;
,& lt;/a-form-item>
,& lt; div 槽=癮ction", slot-scope=拔谋?record"比;
& lt;才能a href=癹avascript:“, rel=癳xternal nofollow",祝辞& lt; a-icon 类型=癲elete",/祝辞& lt;/a>
,& lt;/div>
& lt;/a-table>
& lt; script>
const columns =, (
,{,标题:& # 39;商品名称& # 39;,,dataIndex:, & # 39; id # 39;,,对齐:,& # 39;中心# 39;,},
,{,标题:& # 39;商品型号& # 39;,,dataIndex:, & # 39;账户# 39;,,对齐:,& # 39;中心# 39;,},
,{,标题:& # 39;型号价格& # 39;,,dataIndex:, & # 39;区域# 39;,,对齐:,& # 39;中心# 39;,},
,{,标题:& # 39;下单数量& # 39;,,关键:,& # 39;goodModelCount& # 39;,,对齐:,& # 39;中心# 39;,,宽度:,& # 39;200 px # 39;,, scopedSlots:, {, customRender: & # 39; goodModelCount& # 39;,},,对齐:,& # 39;中心# 39;,,},
,{,标题:& # 39;操作& # 39;,,scopedSlots:, {, customRender: & # 39;行动# 39;,},,宽度:,& # 39;150 px # 39;,,对齐:,& # 39;中心# 39;,}
]
function validatePrimeNumber(数字),{
(1 - 9),if (/^ \ d * | 0美元/test(数量),{
return {才能
,,,validateStatus: & # 39;成功# 39;
,,,errorMsg: & # 39; & # 39;
,,};
,}
,return {
,,validateStatus: & # 39;错误# 39;
errorMsg才能:& # 39;下单数量不能为空& # 39;,
,};
}
export default {
,名字:& # 39;order-dialog& # 39;
,数据(){
return {才能
,,,可见:没错,
,,,labelCol: {
,,,xs:,{,跨度:24,},
,,,sm:,{,跨度:7,},
,,},
,,,wrapperCol: {
,,,xs:,{,跨度:24,},
,,,sm:,{,跨度:12,},
,,},
,,,形式:form.createForm美元。(这个),
,,,validatorRules: {
,,,consigneeName:, {
,,,,规则:,(
,,,,,{,要求:真的,,信息:,& # 39;请输入收货人姓名& # 39;,}
,,,,)
,,,},
,,,consigneePhone:, {
,,,,规则:,(
,,,,,{,要求:真的,,信息:,& # 39;请输入收货人联系电话& # 39;,}
,,,,)
,,,},
,,,addresseeAddressDetail:, {
,,,,规则:,(
,,,,,{,要求:真的,,信息:,& # 39;请输入收货地址详情& # 39;,}
,,,,)
,,,}
,,},
,,,列:列,
,才能tableData:[{,, 1,,帐号:,123年,面积:,123年,goodModelCount:, 3434},,{,, 2,,帐号:,123年,面积:,123年,goodModelCount:, 111}),
,,,goodModelCountData: []
,,}
},
,方法:{
getFildStatus才能(id), {
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
小编给大家分享一下ant-design-vue如何实现表格内部字段验证功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
表格内列可输入的需求还是很常见的,尤其有一些业务场景就是表单内部有一个表格,然后表格的某些列是个进行输入的,就像下面这样
下单数量内容不能为空
<李>下单数量必须输入正整数
翻阅ant-design-vue官网并没有发现说表单内表格字段验证的方案,但是有一个自行处理表单数据的介绍
那我们是不是可以参考这个方案去实现咱自己的业务需求呢,下面就开始说一下实现方案
