elementui中的el-date-picker的daterange 设置快捷键

在 ElementUI 中，el-date-picker 的 daterange 可以通过设置快捷键来快速选择日期范围。具体实现可以参考以下代码：

<el-date-picker
  v-model="dateRange"
  type="daterange"
  :shortcuts="shortcuts"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期">
</el-date-picker>

data() {
  return {
    dateRange: [], // 日期范围
    shortcuts: [
      {
        text: '最近一周',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          picker.$emit('pick', [start, end])
        }
      },
      {
        text: '最近一个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          picker.$emit('pick', [start, end])
        }
      },
      {
        text: '最近三个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
          picker.$emit('pick', [start, end])
        }
      }]
  }
}

在上面的代码中，我们通过在 el-date-picker 组件中设置 shortcuts 属性来实现快捷键的功能。shortcuts 是一个数组，每个元素都是一个对象，包含两个属性：text 和 onClick。text 属性用于显示快捷键的文本，onClick 属性是一个回调函数，用于实现点击快捷键后的逻辑。在 onClick 回调函数中，我们可以通过 picker.$emit('pick', [start, end]) 来设置日期范围的值。在这里，我们设置了三个快捷键：最近一周、最近一个月和最近三个月。点击快捷键后，日期范围将会自动设置为对应的时间段。