el-date-picker设置时间范围

下面这种写法会报错：找不到expirationDate，这是因为涉及到this的指向问题
在普通函数中，this 的上下文并不指向 Vue 组件实例，而是取决于函数的调用方式或者是否使用了严格模式

<el-date-picker
    class="date-icon-common"
    v-model="expireTime"
    type="date"
    value-format="yyyy-MM-dd HH:mm:ss"
    placeholder="选择日期"
    :picker-options="pickerOptions"
  >
</el-date-picker>
data() {
  return {
    expirationDate: '2024-06-30 00:00:00', // 到期时间
    pickerOptions: {
      disabledDate(date) {
        // 禁用过去日期
        if (date.getTime() < Date.now() - 8.64e7) {
          return true;
        }
        // 禁用期限日期之后的日期
        console.log('打印找不到this'，this)
        const expirationDateTimestamp = new Date(this.expirationDate).getTime();
        if (date.getTime() > expirationDateTimestamp) {
          return true;
        }
        return false;
      }
    }
  }
}

✅两种改法
1️⃣使用箭头函数: 箭头函数不会创建自己的 this 上下文，而是从定义时的外层作用域继承 this。修改你的 disabledDate 方法为箭头函数可以解决这个问题，如下所示：

data() {
  return {
   expirationDate: '2024-06-30 00:00:00',
    pickerOptions: {
      disabledDate: (date) => {
        // 禁用过去日期
        if (date.getTime() < Date.now() - 8.64e7) {
          return true;
        }

        // 获取期限日期的时间戳
        const expirationDateTimestamp = new Date(this.expirationDate).getTime();

        // 禁用期限日期之后的日期
        if (date.getTime() > expirationDateTimestamp) {
          return true;
        }
        return false;
      }
    }
  };
}

2️⃣使用计算属性

data() {
  return {
    expirationDate: '2024-06-30 00:00:00'
  };
},
methods: {
  dateDisabled(date) {
    // 禁用过去日期
    if (date.getTime() < Date.now() - 8.64e7) {
      return true;
    }

    // 获取期限日期的时间戳
    const expirationDateTimestamp = new Date(this.expirationDate).getTime();

    // 禁用期限日期之后的日期
    if (date.getTime() > expirationDateTimestamp) {
      return true;
    }
    return false;
  }
},
computed: {
  pickerOptions() {
    return {
      disabledDate: this.dateDisabled
    };
  }
}