项目开发中要实现早、晚班根据各自时段具体去设置可能不同的工作时间，早、晚班展现方式相同，但各自的数据以及每个数据的校验肯定不能相同，所以将表单数据设为早、晚两层对象结构，内部再设多个对象保存各自的time值，for循环表单数据实现效果如下，（只

是还原的效果图，原样式有改动）

 表单数据结构

实现：    需要注意的是el-form表单:model绑定的值必须要求是对象，注意el-form-item上prop绑定值的区别。

        prop属性作用：使表单元素值与数据对象中的值对应绑定，以及绑定校验和数据更新

        第一层 正常for循环结构与绑定key，注意第一层循环后再prop绑定 `此层遍历的数据名.${遍历的索引值}.属性名 `

        第二层 遍历第一层内obj下的数据,绑定key值要求唯一，第一层和第二层索引拼接即可， 注意第二层的el-form-item上的prop值 `上层prop绑定值前缀.此层遍历的数据名.${此层遍历的索引值}.属性名 `

        这里用的是:rules直接将校验绑定到了el-form-item上，没有采取表单绑定:rules

 代码：

  <el-dialog v-model="r_showAddTimes" :title="time_title" width="600px" :close-on-click-modal="false" style="width:800px">
    <el-form :model="tableData" ref="r_infoForm">
      <template v-for="(obj, index) in tableData.data " :key="index">

        <el-form-item label="工作时间名称:" :prop="`data.${index}.workName`" :rules="[{
          required: true,
          message: '此处为必填！',
          trigger: 'blur'
        }]">
          <el-input v-model="obj.workName" autocomplete="off" placeholder="请输入名称" style="width:220px" />
        </el-form-item>

        <el-form-item label="选择时间:" :rules="[{ required: true, }]">
          <template v-for="( item, ind ) in obj.timeRange" :key="`${index}-${ind}`" style="margin-bottom:5px">
            <el-form-item :prop="`data.${index}.timeRange.${ind}.time`" :rules="[{
              required: true,
              type: 'array',
              message: '请选择日期区间',
              fields: { 0: { type: 'string', required: true, trigger: 'change', message: '请选择开始日期' }, 1: { type: 'string', required: true, trigger: 'change', message: '请选择开始日期' } },
            }, { validator: validateTimeRange2, trigger: 'change' }]">
              <span style="margin-right:5px">{{ item.periodTime }}</span>
              <el-time-picker v-model="item.time" is-range format='HH:mm' value-format="HH:mm" start-placeholder="开始时间"
                end-placeholder="结束时间" />
            </el-form-item>
          </template>
          <el-form-item>

      </template>
    </el-form>

    <template #footer>
      <el-button @click="r_showAddTimes = false" icon="CircleCloseFilled">取消
      </el-button>
      <el-button type="info" @click="addWorkTimeFun(r_infoForm)" icon="CircleCheckFilled">确认</el-button>
    </template>
  </el-dialog>