使用element表單時會出現(xiàn)數(shù)組對象類型的數(shù)據(jù)結(jié)構(gòu)并且需要必填校驗
data(){
return {
//表單中出現(xiàn)像jsonList這樣的數(shù)組對象數(shù)據(jù)
editForm:{
script:'',
paramJsonList:[
{paramName:'',paramaValue:''}
]
},
//表單校驗
editFormRule:{
script:[{required:true,message:'請?zhí)顚?,trigger:'blur'}]
}
paramJsonListRules:{
paramName:[{required:true,message:'請?zhí)顚?,trigger:'blur'}],
paramaValue:[{required:true,message:'請?zhí)顚?,trigger:'blur'}],
}
}
}
- 這時數(shù)組對象的檢驗方法就為paramJsonListRules
- 注意的是為了實現(xiàn)校驗，在需要校驗的el-form-item內(nèi)通過自己的:rules加入對象的校驗方法，例如圖中想給參數(shù)值加校驗則直接在相關el-form-item內(nèi)加入 :rules="paramJsonListRules.paramaValue",就可實現(xiàn)
- 對應的prop的鍵名要與數(shù)組對象中鍵名以及校驗方法中的名稱保持相同
- 注意：prop處寫法一定是? :prop="`paramJsonList[${index}].paramValue`"
?表單處代碼如下：?文章來源：http://www.zghlxwxcb.cn/news/detail-501709.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-501709.html
到了這里，關于vue +element UI form表單校驗數(shù)組嵌套，數(shù)組對象必填校驗的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
