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

scorpio_h

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

阅读量1.9w

点赞数

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

本文链接：https://blog.csdn.net/scorpio_h/article/details/79181643

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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&

最低0.47元/天解锁文章