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


页面效果:

vue :



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"
/>


:disabled="submitType==='update'">
v-for="item in manageOptions"
:key="item.areaName"
:label="item.areaName"
:value="item.areaId">






{{item.indexName}}


{{item.indexDesc}}




v-for="item2 in item.typeList"
:key="item2.typeCode"
:label="item2.typeName"
:value="item2.typeCode">




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"
/>


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)"
/>


@blur="blurClick(submitValue[index],item.typeList,typeCode[index])">



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) : "",// 值(两个小数)
})
}
}

}
}

相关