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