el-form表单多重for循环数据结构展示，各自输入框校验生效,循环表单验证

搬砖IT员

已于 2023-11-07 10:37:17 修改

阅读量2.3k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue项目功能文章标签： elementui 前端

于 2022-03-24 23:46:56 首次发布

本文链接：https://blog.csdn.net/gjt1234/article/details/123724421

vue项目功能专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中实现早、晚班工作时间设置的动态表单，表单数据采用嵌套对象结构，通过双重for循环绑定数据和校验规则。详细阐述了el-form的model绑定、prop属性的作用，以及如何在el-form-item中进行动态校验规则设置，展示了代码实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目开发中要实现早、晚班根据各自时段具体去设置可能不同的工作时间，早、晚班展现方式相同，但各自的数据以及每个数据的校验肯定不能相同，所以将表单数据设为早、晚两层对象结构，内部再设多个对象保存各自的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>