当前位置：首页 > news >正文

Ant Design vue 多层for循环form表单自定义校验

news 来源：原创 2024/9/20 0:34:04

数据结构如下：三维数组。

注意：<a-form-model>一定得写在for外面！！！！

<!-- 弹出框 -->
<a-modal:title="title":dialog-style="{ top: '20px' }":visible="visible":confirmLoading="confirmLoading":width="1450"@ok="() => handleSubmit()"@cancel="() => handleCancel()"> <a-form-model ref="formRef" :model="model" class="dialogMaxHeight" :rules="rules">  <div v-for="(item, lIndx) in model.result" :key="item.id" v-show="curTabId === item.id"><div class="group-item"  v-for="(con, cIndx) in item.contentList" :key="con.id"><!-- 两层for写法--><div class="inner"> <a-row style="padding: 8px 0"> <a-col :span="12"><a-form-model-item label="自评分" :labelCol="labelCol" :wrapperCol="wrapperCol" :prop="'result.' + lIndx + '.contentList.' + cIndx + '.selfScore'":rules="[{ required: parseInt(item.typeId) == 2 ? true : false, validator: validateSelfScore, trigger: ['change', 'blur'] }]" > <a-input-number  :disabled="isDisabledAuth('selfScore')" placeholder="" :min="getMinScore(con.scoringStandard)" :max="getMaxScore(con.scoringStandard)" v-model="con.selfScore"  style="width: 10rem" /><span style="padding: 0 5px">分</span></a-form-model-item></a-col>  </a-row></div> <!-- 三层for写法--><div class="con"><a-row style="padding: 8px 0"> <a-col :span="12"><a-form-model-item label="自评分" :labelCol="labelCol" :wrapperCol="wrapperCol" :prop="'result.' + lIndx + '.contentList.' + cIndx + '.list.' + gIndex +  '.selfScore'":rules="[{ required: parseInt(item.id) === 2 ? true : false, validator: validateSelfScoreLev2, trigger: ['change', 'blur'] }]"   > <a-input-number :disabled="isDisabledAuth('selfScore')" placeholder="" :min="getMinScore(group.scoringStandard)" :max="getMaxScore(group.scoringStandard)" v-model="group.selfScore" style="width: 10rem" /><span style="padding: 0 5px">分</span></a-form-model-item></a-col>  </a-row></div> </div>  </div> 
</a-form-model>   
</a-modal>                       export default {
methods: { /* 原始未重构写法 和prop里数据结构一致  */validateSelfScore (rule, value, callback) {// 校验自评分const oneIndex = rule.field.split('.')[1]const twoIndex = rule.field.split('.')[3]const rowData = this.model.result[oneIndex].contentList[twoIndex]const rowData2 = this.model.result[oneIndex].contentList[twoIndex].list[threeIndex]if(!value && value === '' || value === null) {callback(new Error(`请输入${rowData.content ? rowData.content: ''}自评分!`))} else {callback()}}, // 重构后validateSelfScore (rule, value, callback) {// 校验自评分（仅一级信用）// const oneIndex = rule.field.split('.')[1]// const twoIndex = rule.field.split('.')[3]// const rowData = this.model.result[oneIndex].contentList[twoIndex]if(this.isDisabledAuth('selfScore') === false) { // 物业btn未禁用this.getValidRowCall(rule).then(res => {const rowData = this.model.result[res.oneIndex].contentList[res.twoIndex] // typeId诚信信息必校验if(parseInt(rowData.typeId) == 2) {if(!value && (value === '' || value === null)) {// if(rowData.content) this.$message.warning(`请输入${rowData.content ? rowData.content: ''}自评分!`)callback(new Error(`请输入${rowData.content ? rowData.content: ''}自评分!`))} else {callback()}    } else {callback()}})} else {callback()}},// 三维数组校验 和prop里数据结构一致threeIndex validateSelfScoreLev2 (rule, value, callback) {// 校验自评分（二级信用）// const rowData = this.model.result[oneIndex].contentList[twoIndex].list[threeIndex]if(this.isDisabledAuth('selfScore') === false) { // 物业btn未禁用this.getValidRowCall(rule).then(res => {const rowData = this.model.result[res.oneIndex].contentList[res.twoIndex].list[res.threeIndex]// typeId诚信信息必校验if(parseInt(rowData.typeId) == 2) {if(!value && (value === '' || value === null)) {callback(new Error(`请输入${rowData.content ? rowData.content: ''}自评分!`))} else {callback()}} else {callback()}})} else {callback()}},handleSubmit () { // form表单提交this.$refs.formRef.validate(valid => { if (valid) { this.$message.warning('验证通过。。。');    } else{this.$message.warning('验证未通过。。。');return false;}})},} 
}