vue循环遍历动态数组子组件（含子组件表单校验）_vue遍历展示多个组件

父组件引用

<arrange-info
          :formRef="formRef"
          :leaveDate="this.infoData.leaveDate"
          @addWorkArrange="addWorkArrange"
          @deleteWorkArrange="deleteWorkArrange"
          @saveWorkArrange="saveWorkArrange"
          @creatWorkArrange="creatWorkArrange"
          @edit="edit"
          @cancelWorkArrange="cancelWorkArrange"
          style="margin-top: 20px"
        ></arrange-info>

 子组件

<template>
  <div class="arrangeInfo">
    <div class="title">离职工作安排</div>
    <el-form ref="formRef" :model="formRef" :rules="arrangeRules">
    <div class="content" v-for="(item, index) in formRef.arrangeList" :key="index">
      <div class="left">
        <div class="label">离职工作安排</div>
      </div>
      <div class="middle">
        <div class="top">
          <div class="date" >
            <span v-if="item.isEdit"><span class="required" style="color: #c8152d">*</span>交接日期</span>
            <el-form-item  :prop="`arrangeList.${index}.dateRange`" :rules="{ required: true, message: '请选择',trigger: 'change' }" v-if="item.isEdit">
            <el-date-picker
              v-model="item.dateRange"
              type="daterange"
              range-separator="-"