vue项目 - element日期时间选择器快捷键+自定义外部选择按钮

实现效果：

实现代码：

<template>
    <div>
        <el-form class="dataForm" label-width="100px">
            <el-form-item label="同步时间：">
                <el-date-picker
                    v-model="date"
                    type="datetimerange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <el-button-group style="margin-left:15px">
                    <el-button type="success" @click="selectDate(1)" size="small">1 天</el-button>
                    <el-button type="primary" @click="selectDate(2)" size="small">2 天</el-button>
                    <el-button type="warning" @click="selectDate(3)" size="small">3 天</el-button>
                </el-button-group>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name:'syncOrder',
    data(){
        return{
            date:[],
        }
    },
    mounted(){
    	//默认初始化时选中一天
        this.date = []
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
        this.date.push(start)
        this.date.push(end)
    },
    methods:{
        // 选择时间快捷键
        selectDate(num){
            this.date = []
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * num);
            this.date.push(start)
            this.date.push(end)
        }
    }
}
</script>

参考:https://blog.youkuaiyun.com/qq_41775006/article/details/111252707?spm=1001.2014.3001.5501