vue中使用v-for实现两次嵌套循环，判断某子元素是否显示，进行复杂表单校验-编程知识

一、需求场景：

有以下一个使用场景，名称111、名称222、名称333，是放在一个大数组里的，然后通过第一层for循环显示出来的。名称333数组里又包含自己的子数组，子数组再通过第二次for循环展示出来。当我们选择发放方式的时候，符合选择条件的只显示自己对应那一行的首发比例。最后对子数组里的每一项进行表单校验。
在这里插入图片描述
关于数组结构，我们前端这边可以自定义写好。

const form = reactive({title: '',templateList: [{key: 'region',label: '名称111',list: [{ settlement_type: '1', limit_days: '0', rate: '', settlement_way: '' }]}, {key: 'partner',label: '名称222',list: [{ settlement_type: '2', limit_days: '0', rate: '', settlement_way: '' }]}, {key: 'user',label: '名称333',list: [{ settlement_type: '3', limit_days: '30', rate: '', settlement_way: '' },{ settlement_type: '3', limit_days: '60', rate: '', settlement_way: '' },{ settlement_type: '3', limit_days: '180', rate: '', settlement_way: '' },{ settlement_type: '3', limit_days: '90', rate: '', settlement_way: '' },]}]
})

二、解决方法：

可以考虑使用 v-for 进行双层嵌套循环，其中有几个需要注意的点：

1. 父循环中的 index 与子循环的 index 写的时候必须区分开，不要搞混。
2. 不要忽略 :key 值。父级循环对应父级的index，子级循环对应子级的index。

三、代码实现：

<template>
<!-- ========= 这是循环取出第一层数组，保存在item里面 ======== --><divv-for="(item,index) in form.templateList":key="index"><div style="margin-bottom:10px;">{{ item.label }}</div><!-- ========= 这是循环出第二层数组，注意要在item里面取出 ======== --><a-row:gutter="15"v-for="(itemChild,indexChild) in item.list":key="indexChild"><a-col :span="8"><a-form-item:field="`templateList[${index}].list[${indexChild}].rate`":label="Number(itemChild.limit_days) > 0 ? itemChild.limit_days + '天利息':'利息'":rules="formRules.rate"><a-inputv-model="itemChild.rate"placeholder="请填写"allow-clear><template #append>%</template></a-input></a-form-item></a-col><a-col :span="8"><a-form-item:field="`templateList[${index}].list[${indexChild}].settlement_way`"label="发放方式":rules="formRules.settlement_way"><a-selectv-model="itemChild.settlement_way"placeholder="请选择"allow-clear@change="((val) => {changeSelect(val,itemChild)})"><a-optionv-for="item in giveModelList":key="item.key":label="item.val":value="item.key"/></a-select></a-form-item></a-col><a-col:span="8"v-if="itemChild.settlement_way === '3'"><a-form-item:field="`templateList[${index}].list[${indexChild}].first_rate`"label="首发比例":rules="formRules.first_rate"><a-inputv-model="itemChild.first_rate"placeholder="请填写"allow-clear><template #append>%</template></a-input></a-form-item></a-col></a-row></div>
</template><script setup lang="ts">
import { ref, unref, reactive, onMounted } from "vue"
const form = reactive({title: '',templateList: [{key: 'region',label: '名称111',list: [{ settlement_type: '1', limit_days: '0', rate: '', settlement_way: '' }]}, {key: 'partner',label: '名称222',list: [{ settlement_type: '2', limit_days: '0', rate: '', settlement_way: '' }]}, {key: 'user',label: '名称333',list: [{ settlement_type: '3', limit_days: '30', rate: '', settlement_way: '' },{ settlement_type: '3', limit_days: '60', rate: '', settlement_way: '' },{ settlement_type: '3', limit_days: '180', rate: '', settlement_way: '' },{ settlement_type: '3', limit_days: '90', rate: '', settlement_way: '' },]}]
})const formRules = {rate: [{ required: true, validator: validatePercentageNumber, trigger: 'blur' }],settlement_way: [{ required: true, trigger: 'change', message: '请选择' }],first_rate: [{ required: true, validator: validatePercentageNumber, trigger: 'blur' }]
}const giveModelList = [{ key: '1', val: '一次性发放' },{ key: '2', val: '每天发放' },{ key: '3', val: '首次+每天' }
]
</script><style lang="less" scoped></style>

方案1：

这种方式最简单，通过直接判断子数组 settlement_way 字是否等于 ‘3’

   v-if="itemChild.settlement_way === '3'"

方案2：

一开始没想到用 settlement_way 字段是否等于 ‘3’，能直接解决。使用了另外的方法，也记录下，这种方法也经常会用到。

新建一个数组，符合判断条件的，使用 父级index和子级index 组装成 字符串 ，然后push进新数组；
不符合判断条件的，for循环新数组，如果当前 父级index和子级index 组装成的字符串 等于 数组里的某值，则从数组里删除该值。
html中 v-if 判断数组中是否（ includes ）包含该值，有的话直接显示首发比例input，否则隐藏。

<a-col :span="8"><a-form-item:field="`templateList[${index}].list[${indexChild}].settlement_way`"label="发放方式":rules="formRules.settlement_way"><a-selectv-model="itemChild.settlement_way"placeholder="请选择"allow-clear@change="((val) => {changeSelect(val,index,indexChild,itemChild)})"><a-optionv-for="item in giveModelList":key="item.key":label="item.val":value="item.key"/></a-select></a-form-item>
</a-col><a-col:span="8"v-if="indexArr.length > 0 && indexArr.includes(`${index}${indexChild}`)"><a-form-item:field="`templateList[${index}].list[${indexChild}].first_rate`"label="首发比例":rules="formRules.first_rate"><a-inputv-model="itemChild.first_rate"placeholder="请填写"allow-clear><template #append>%</template></a-input></a-form-item>
</a-col>

const indexArr = ref([])
function changeSelect(val:any, index:any, indexChild:any, itemChild:any) {if (val == '3') {indexArr.value.push(`${index}${indexChild}`)} else {for (let i = 0; i < indexArr.value.length; i++) {if (`${index}${indexChild}` == indexArr.value[i]) {indexArr.value.splice(i, 1)}}delete itemChild.first_rate}console.log(indexArr.value, 'indexArr') // ['00','10','21','22','23']
}

打印结果：

在这里插入图片描述

四、对复杂对象型数组进行表单验证

因为所有的都是必填项，所以涉及到子数组里每一项的校验问题。需要给每个元素添加校验。
先看下这个验证的效果图。

在这里插入图片描述

已知的数据结构：

const form = reactive({title: '',templateList: [{key: 'region',label: '名称111',list: [{ settlement_type: '1', limit_days: '0', rate: '', settlement_way: '' }]}, {key: 'partner',label: '名称222',list: [{ settlement_type: '2', limit_days: '0', rate: '', settlement_way: '' }]}, {key: 'user',label: '名称333',list: [{ settlement_type: '3', limit_days: '30', rate: '', settlement_way: '' },{ settlement_type: '3', limit_days: '60', rate: '', settlement_way: '' },{ settlement_type: '3', limit_days: '180', rate: '', settlement_way: '' },{ settlement_type: '3', limit_days: '90', rate: '', settlement_way: '' },]}]
})const formRules = {rate: [{ required: true, validator: validatePercentageNumber, trigger: 'blur' }],settlement_way: [{ required: true, trigger: 'change', message: '请选择' }],first_rate: [{ required: true, validator: validatePercentageNumber, trigger: 'blur' }]
}

定义好校验规则，这里只需要设置 :field 在数据对象中的path就行。 :field=“templateList[${index}].list[${indexChild}].rate”

  <divclass="outline"v-for="(item,index) in form.templateList":key="index"><div style="margin-bottom:10px;">{{ item.label }}</div><a-row:gutter="15"v-for="(itemChild,indexChild) in item.list":key="indexChild"><a-col :span="8"><a-form-item:field="`templateList[${index}].list[${indexChild}].rate`":label="Number(itemChild.limit_days) > 0 ? itemChild.limit_days + '天利息':'利息'":rules="formRules.rate"><a-inputv-model="itemChild.rate"placeholder="请填写"allow-clear><template #append>%</template></a-input></a-form-item></a-col>