1、效果图

2、实现方法

直接在elementui的时间选择器上修改，添加shorcuts选项，但是样式要自己修改。

有几个注意点：

1）如图我是选中后有显示背景颜色的，也就意味着要给选中的选项添加类名，elementui没有这个功能，需要我们自己实现。

2）选中时间后，给对应的快捷选项也选中。比如我在时间选择器中选择了近7天，那么对应快捷选项也要选中。

3、代码

shortCuts：

 shortcuts: [{text: "今日",onClick(picker) {const [start, end] = getToday();picker.$emit("pick", [start, end]);},},{text: "昨日",onClick(picker) {const [start, end] = getYesterday();picker.$emit("pick", [start, end]);},},{text: "本周",onClick(picker) {const [start, end] = getWeek();picker.$emit("pick", [start, end]);},},{text: "上周",onClick(picker) {const [start, end] = getLastWeek();picker.$emit("pick", [start, end]);},},{text: "本月",onClick(picker) {const [start, end] = getMonth();picker.$emit("pick", [start, end]);},},{text: "上月",onClick(picker) {const [start, end] = getLastMonth();picker.$emit("pick", [start, end]);},},{text: "近7天",onClick(picker) {const [start, end] = getPassedSeven();picker.$emit("pick", [start, end]);},},{text: "近14天",onClick(picker) {const [start, end] = getPassedFourteen();picker.$emit("pick", [start, end]);},},{text: "近30天",onClick(picker) {const [start, end] = getPassedThirty();picker.$emit("pick", [start, end]);},},{text: "近60天",onClick(picker) {const [start, end] = getPassedSixty();picker.$emit("pick", [start, end]);},},{text: "近90天",onClick(picker) {const [start, end] = getPassedNinety();picker.$emit("pick", [start, end]);},},]

获取各个时间的函数：

export function getToday() {const start = new Date();start.setHours(0, 0, 0, 0);const end = new Date();end.setHours(23, 59, 59, 0);return [start, end];
}export function getYesterday() {const start = new Date();start.setDate(start.getDate() - 1);start.setHours(0, 0, 0, 0); const end = new Date();end.setDate(end.getDate() - 1);end.setHours(23, 59, 59, 0); return [start, end];
}export function getWeek() {const start = new Date();const end = new Date();end.setHours(23, 59, 59, 0);const dayOfWeek = start.getDay() || 7;start.setDate(start.getDate() - dayOfWeek + 1);start.setHours(0, 0, 0, 0);return [start, end];
}export function getLastWeek() {const start = new Date();start.setDate(start.getDate() - 6 - (start.getDay() || 7));start.setHours(0, 0, 0, 0);const end = new Date(start);end.setDate(start.getDate() + 6); // 获取本周的最后一天end.setHours(23, 59, 59, 0);return [start, end];
}export function getMonth() {const start = new Date();start.setDate(1); start.setHours(0, 0, 0, 0);const end = new Date(); end.setHours(23, 59, 59, 0); return [start, end];
}export function getPassedSeven() {const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);start.setHours(0, 0, 0, 0); const end = new Date();end.setHours(23, 59, 59, 0); return [start, end];
}export function getPassedFourteen() {const start = new Date();start.setHours(0, 0, 0, 0);const end = new Date();end.setHours(23, 59, 59, 0);start.setTime(start.getTime() - 3600 * 1000 * 24 * 13);return [start, end];
}export function getPassedThirty() {const end = new Date();end.setHours(23, 59, 59, 0);const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);start.setHours(0, 0, 0, 0); return [start, end];
}export function getPassedSixty() {const end = new Date();end.setHours(23, 59, 59, 0);const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 59);start.setHours(0, 0, 0, 0);return [start, end];
}export function getPassedNinety() {const end = new Date();end.setHours(23, 59, 59, 0); const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 89);start.setHours(0, 0, 0, 0);return [start, end];
}export function getLastMonth() {const today = new Date();const lastMonth = new Date(today.getFullYear(),today.getMonth() - 1,1);const firstDay = new Date(lastMonth.getFullYear(),lastMonth.getMonth(),1);const lastDay = new Date(lastMonth.getFullYear(),lastMonth.getMonth() + 1,0);firstDay.setHours(0, 0, 0, 0);lastDay.setHours(23, 59, 59, 0);return [firstDay, lastDay]
}

设置active的类名：

export function setShortCutsClass(text) {const data = document.getElementsByClassName('el-picker-panel__shortcut');for (let i of data) {if (i.innerText === '今日') {i.style.background = '#edf4fb';i.style.color = '#606266'}if (i.innerText === text) {i.classList.add('el-picker-panel__shortcut-active');} else {i.classList.remove('el-picker-panel__shortcut-active');}}
}

在时间选择器的change事件中选中时间后把对应的快捷选项设置为active：

setTimeShortClass(val) {Object.keys(this.timeMap).forEach((name) => {if (Date.parse(val[0]) === Date.parse(this.timeMap[name]()[0]) &&Date.parse(val[1]) === Date.parse(this.timeMap[name]()[1])) {setShortCutsClass(name);}});
},timeMap: {今日: getToday,昨日: getYesterday,本周: getWeek,上周: getLastWeek,本月: getMonth,上月: getLastMonth,近7天: getPassedSeven,近14天: getPassedFourteen,近30天: getPassedThirty,近60天: getPassedSixty,近90天: getPassedNinety,}