element UI DatePicker 日期选择器 点击时间点可选范围前后十五天

1. 功能需求描述
点击时间表上任意一个时间点，点击选中后可选时间范围为该时间点的前后十五天
具体功能可以修改天数

2.直接上代码
网页部分
注意 :picker-options=" "

 <el-date-picker
     v-model="landDate"
     style="width: 100%"
     type="daterange"
     align="right"
     value-format="yyyy-MM-dd"
     range-separator="——"
     start-placeholder="开始日期"
     :picker-options="pickerOptions"
     end-placeholder="结束日期">
</el-date-picker>

3.this 指向问题

如果 this定义报错可用试一下这个方法
在.eslintrc.js 文件内配置
false时不会影响其它页面定义的 this
rules: {
    '@typescript-eslint/no-this-alias': [
      'error',
      {
        allowDestructuring: false, // Allow `const { props, state } = this`; false by default
        allowedNames: ['vm'] // Allow `const vm= this`; `[]` by default
      }
    ]
}

4.TS部分，JS同理

// 定义空变量
  private timeAhead = ''
  private laterTime = ''
// 时间选择范围
  private get pickerOptions() {
  // this指向问题
    const vm = this
    return {
      onPick(time: any) {
        (this as any).$nextTick(() => {
          // time.minDate -- 选中开始的时间
          const start = new Date(time.minDate)
          // 前十五天
          vm.timeAhead = moment(start.getTime() - 3600 * 1000 * 24 * 15).format('YYYY-MM-DD')
          // 后十五天
          vm.laterTime = moment(start.getTime() + 3600 * 1000 * 24 * 15).format('YYYY-MM-DD')
        })
      },
      disabledDate(time: any): boolean {
        return new Date(vm.timeAhead).getTime() > time.getTime() || new Date(vm.laterTime).getTime() < time.getTime()
      }
    }
  }