el-form 表单循环对象集合，不使用子组件的方式，可以对值实现单独的存取，对其他值不影响

页面效果：

 

 

 

vue ：

<el-form ref="form" :model="form" label-width="150px" :inline="true">
  <el-form-item label="日期" prop="date">
    <el-date-picker
      v-model="form.date"
      type="date"
      placeholder="选择日期"
      :clearable="false"
      size="mini"
      :editable="false"
      :disabled="submitType==='update'"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
    />
  </el-form-item>
  <el-form-item label="管理区" prop="manageList">
    <el-select class="editVolumeCost-manage" v-model="form.manageList" placeholder="请选择" size="mini"
               :disabled="submitType==='update'">
      <el-option
        v-for="item in manageOptions"
        :key="item.areaName"
        :label="item.areaName"
        :value="item.areaId">
      </el-option>
    </el-select>
  </el-form-item>
  <div style="overflow: auto;height: 600px;width: 100%">
    <div v-for="(item,index) in list" :key="index">
      <el-row>
        <el-col :span="4"><p class="indexName">{{item.indexName}}</p></el-col>
        <el-col :span="15"><span class="fontColor">{{item.indexDesc}}</span></el-col>
      </el-row>
      <el-divider></el-divider>
      <el-form-item label="录入方式" prop="typeCode">
        <el-select v-model="typeCode[index]" placeholder="请选择" size="mini">
          <el-option
            v-for="item2 in item.typeList"
            :key="item2.typeCode"
            :label="item2.typeName"
            :value="item2.typeCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="有效期" prop="submitStartTime" label-width="100px">
        <el-date-picker
          v-model="submitStartTime[index]"
          type="date"
          placeholder="选择日期"
          :clearable="false"
          size="mini"
          :editable="false"
          :disabled="submitType==='update'"
          format="yyyy - MM - dd"
          value-format="yyyy-MM-dd"
          :default-value="form.date"
        />
      </el-form-item>
      <el-form-item label="至" prop="submitEndTime" label-width="30px">
        <el-date-picker
          v-model="submitEndTime[index]"
          type="date"
          placeholder="选择日期"
          :disabled="submitType==='update'"
          :clearable="false"
          size="mini"
          :editable="false"
          format="yyyy - MM - dd"
          value-format="yyyy-MM-dd"
          :picker-options="endTime(index)"
        />
      </el-form-item>
      <el-form-item label="值" prop="submitValue" label-width="150px">
        <el-input v-model="submitValue[index]" placeholder="请输入内容" size="mini"
                  @blur="blurClick(submitValue[index],item.typeList,typeCode[index])"></el-input>
      </el-form-item>
    </div>
  </div>
</el-form>

 

script :

data() {
  return {
　　　typeCode: [],//录入方式Code

submitStartTime: [],//有效期开始时间
submitEndTime: [],//有效期结束时间
submitValue: [],//  值(两个小数)

  }
}，
methods：{
　　submint(){  //提交的时候再循环一次集合，根据下标取值，
　　for (let i = 0; i < this.list.length; i++) {

  if (this.submitValue[i] !== '' && this.submitValue[i] !== undefined && this.submitValue[i] !== null) {
    this.form.listData.push({
      typeCode: this.typeCode[i] ? this.typeCode[i] : "",//录入方式Code
      indexCode: this.list[i].indexCode ? this.list[i].indexCode : "",
      submitStartTime: this.submitStartTime[i] ? this.submitStartTime[i] : "",//有效期开始时间
      submitEndTime: this.submitEndTime[i] ? this.submitEndTime[i] : "",//有效期结束时间
      submitValue: parseFloat(this.submitValue[i]).toFixed(2) ? parseFloat(this.submitValue[i]).toFixed(2) : "",//  值(两个小数)
    })
  }
}

}
}