List集合循环多个<el-date-picker>配置picker-options属性
<el-row :gutter="20">
<template v-for="(item, index) in dataList">
<el-col :span="12">
<div class="dflex mb10">
<label for="" class="label-width">设置日期:</label>
<div class="winput">
<el-date-picker
v-model.trim="item.deployDate"
:editable="false"
clearable
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
class="w100"
:picker-options="item.deployDatePicker"
@focus="handleDateFocus(item)"
>
</el-date-picker>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="dflex mb10">
<label for="" class="label-width">依赖设置日期:</label>
<div class="winput">
<el-date-picker
v-model.trim="item.relatedDate"
:editable="false"
clearable
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
class="w100"
:picker-options="item.relatedDatePicker"
@focus="handleDateFocus(item)"
>
</el-date-picker>
</div>
</div>
</el-col>
</template>
</el-row>
dataList: [
{
deployDate: '',
relatedDate: '',
deployDatePicker: { disabledDate: null },
relatedDatePicker: { disabledDate: null }
},
...
]
handleDateFocus(item) {
item.deployDatePicker.disabledDate = (time) => {
if (item.deployDate) {
let _t = new Date(item.deployDate).getTime() - (1*24*3000*1000);
return time.getTime() <= _t;
}
}
item.relatedDatePicker.disabledDate = (time) => {
if (item.deployDate) {
let _t = new Date(item.deployDate).getTime() - (1*24*3000*1000);
return time.getTime() > _t;
}
}
},