vue3.0中使用element UI表单遍历校验问题解决

//我们需要遍历的form对象数组
const arr = [
    {
        name:'',
        sex:'',
        age:''，
    },{
        name:'',
        sex:'',
        age:''，
    }
]
//处理后的对象
const afterForm = {
    name:'',
    sex:'',
    age:'',
    child:arr,//这里的arr就是我们需要遍历的数组【这个key值可以随便取，不一定非得是‘child'，尽量不要出现歧义就好】
}

<el-dialog v-model="addPageVisible" width="1000px" title="新增页面参数配置" @closed="closeDialog">
      <el-form :model="form" label-width="120px" :inline="true" ref="ruleFormRef" :rules="rules">
        <el-card v-for="(item, index) in form.child" :key="index" shadow="hover" class="mb20">
          <el-form-item label="页面名称：" :prop="`child[${index}].pageName`" :rules="rules.pageName">
            <el-input v-model.trim="item.pageName" class="length-limit"></el-input>
          </el-form-item>
          <el-form-item label="页面路由：" :prop="`child[${index}].routerName`" :rules="rules.routerName">
            <el-input v-model.trim="item.routerName" class="length-limit"></el-input>
          </el-form-item>
          <el-form-item label="页面类型：" :prop="`child[${index}].businessType`" :rules="rules.businessType">
            <el-select v-model.trim="item.businessType" class="length-limit">
              <el-option
                v-for="item in bussinessOptions"
                :value="item.value"
                :label="item.label"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <div class="pageManage__dialog-foot">
            <el-button type="primary" round @click="addNewForm" v-if="index === allForm.length - 1"
              >新增配置表单</el-button
            >
            <el-button round :disabled="allForm.length === 1 && index === 0" @click="deleteForm(index)"
              >删除表单</el-button
            >
          </div>
        </el-card>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button round @click="addPageVisible = false">取 消</el-button>
          <el-button round type="primary" @click="submitNewPage">提交</el-button>
        </span>
      </template>
    </el-dialog>
//这是我实际项目的页面，所以定义的参数名可能不太一样

const rules = reactive({
      pageName: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
      routerName: [{ required: true, message: '请输入路由名称', trigger: 'blur' }],
      businessType: [{ required: true, message: '请选择页面类型', trigger: 'change' }],
    })

const form = computed(() => {
      return { pageName: 'string', routerName: 'string', businessType: 'string', child: allForm.value }
    })