elementUI 日期组件 el-date-picker 实现含有 “至今” 按钮

在Element UI的日期时间选择器组件el-date-picker中，可以通过设置picker-options属性来自定义快速选择面板的内容，包括“至今”这个按钮。以下是一个实现“至今”按钮的示例代码：

<template>
  <el-date-picker
    v-model="dateRange"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    align="right"
    :picker-options="pickerOptions">
  </el-date-picker>
</template>
 
<script>
  export default {
    data() {
      return {
        dateRange: [],
        pickerOptions: {
          shortcuts: [{
            text: '至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); // 默认至30天前
              picker.$emit('pick', [start, end]);
            }
          }]
        }
      };
    }
  };
</script>

在这个例子中，pickerOptions对象的shortcuts属性定义了一个快捷选择项列表，其中包含一个自定义的快捷方式“至今”。点击“至今”按钮时，会设置日期选择器的开始日期为30天前（可以根据需求自定义这个日期范围），并将当前日期设置为结束日期。