【无标题】

el-date-picker的picker-options不能更新到最新时间问题解决

一、问题描述

 在使用el-date-picker时候，有时需要限制不能选择某个时间点之前的需求，需要用picker-options去限制。picker-options是放在data里，然后只能在页面初加载时候加载一次，导致在选择时候，无法获取最新时间。直接上代码。

二、正常使用时候代码以及问题显示

         <el-date-picker
            type="datetime"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model.trim="startTime"
            style="width: 100%"
          ></el-date-picker>

data() {
    return {
     startTime: "",
      pickerOptions: {
        disabledDate(time) {
          const date = new Date();
          return time.getTime() < date.getTime() - 86400000;
        },
        selectableRange: (() => {
          let data = new Date();
          let hour = data.getHours();
          let minute = data.getMinutes() + 10;   //+10是因为我们需求要求在当前时间10分钟以后
          let second = data.getSeconds();
          console.log("hour", hour);
          console.log("minute", minute);
          console.log("second", second);
          return [`${hour}:${minute}:${second} - 23:59:59`];
        })(),
      },
    };
  },

如上图，时间0是页面刚加载出来的时间点，时间1是可选的最初时间，时间3是当前时间。正常我应该可选时间最初为10:08:00，但时间1那里却能选到10:07:00，原因是这个是按最初获取的时间0决定的，并不随时间3变化。

解决思路：在点开时间框时让this.pickerOptions更新

三、解决后代码：

 		<el-date-picker
            type="datetime"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model.trim="startTime"
            style="width: 100%"
            @focus="onFocus"
          ></el-date-picker>

data() {
    return {
     startTime: "",
      pickerOptions: {
        disabledDate(time) {
          const date = new Date();
          return time.getTime() < date.getTime() - 86400000;
        },
        selectableRange: (() => {
          let data = new Date();
          let hour = data.getHours();
          let minute = data.getMinutes() + 10;   //+10是因为我们需求要求在当前时间10分钟以后
          let second = data.getSeconds();
          console.log("hour", hour);
          console.log("minute", minute);
          console.log("second", second);
          return [`${hour}:${minute}:${second} - 23:59:59`];
        })(),
      },
    };
  },
methods: {
 // 获取焦点时候，通过this.$set强制更新pickerOptions的selectableRange
    onFocus() {
      this.$set(
        this.pickerOptions,
        "selectableRange",
        (() => {
          let data = new Date();

          let hour = data.getHours();
          let minute = data.getMinutes() + 10;
          let second = data.getSeconds();
          console.log("hour", hour);
          console.log("minute", minute);
          console.log("second", second);
          return [`${hour}:${minute}:${second} - 23:59:59`];
        })()
      );
    },
}