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

Vue+ElementUI时间范围选择器实现

scorpio_h

于 2018-01-27 17:07:22 发布

阅读量1.9w

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue elementUI 时间组件

本文链接：https://blog.youkuaiyun.com/scorpio_h/article/details/79181643

本文介绍了一个使用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 '