vue+elementUI版时间范围选择器（具备昨天、本周、上周、本月、上月等快捷选择按钮）

最新推荐文章于 2025-10-18 16:01:58 发布

原创

最新推荐文章于 2025-10-18 16:01:58 发布 · 1.9w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementUI #时间组件

本文介绍了一个使用Vue和ElementUI构建的时间范围选择器组件，该组件包含昨天、本周、上周、本月和上月等快捷选择按钮。通过引入momentJs库，实现了灵活的时间处理功能。

<template>
  <div>
    <el-date-picker
      v-model="range"
      type="datetimerange"
      :placeholder="placeholder || '请选择时间范围'"
      @change="searchTime"
    >
    </el-date-picker>
    <el-button style="margin-left: 10px;" type="primary" @click="yesterday">昨天</el-button>
    <el-button style="margin-left: 10px;" type="primary" @click="theWeek">本周</el-button>
    <el-button style="margin-left: 10px;" type="primary" @click="lastWeek">上周</el-button>
    <el-button style="margin-left: 10px;" type="primary" @click="theMonth">本月</el-button>
    <el-button style="margin-left: 10px;" type="primary" @click="lastMonth">上月</el-button>
    <el-button style="margin-left: 20px;" icon="el-icon-document" class="el-icon-document" type="primary" @click="exportData">导出</el-button>
  </div>
</template>

<script>
  import { timestamp } from '