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;
    }
  }
},
posted on 2023-06-10 11:35  羽丫头不乖  阅读(446)  评论(0)    收藏  举报