Vue + Element 实现下拉选择统计时间数据栏并展示

效果如下

 

 

 

 

代码如下

 

<!-- 头部下拉选择统计时间数据栏 -->
  <!-- 选择项：2: 近七天 3:近30天 5:自定义 -->

<template>
  <div class="mod-home">
    <div class="time">
      <!-- 栏目标题行 -->
      <div class="title-line">
        <div class="title-right">
          <span>统计时间：</span>
          <el-select
            v-model="dateValue"
            @change="setDateRange(dateValue)"
            style="width:100px;height: 15px;"
            size="mini"
          >
            <el-option
              v-for="item in dateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span
            class="title-time"
            v-if="dateValue === 2 || dateValue === 3"
          >{{dateRange[0]}}至{{dateRange[1]}}</span>
          <span class="title-time" v-if="dateValue === 5">{{dateOptions[2].label}}</span>
          <div class="title-picker"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      dateValue: 2,
      dateOptions: [
        {
          label: '近 7 天',
          value: 2
        },
        {
          label: '近 30 天',
          value: 3
        },
        {
          label: '自定义',
          value: 5
        }
      ],
      dateRange: [], // 展示的时间参数
    }
  },
  mounted () {
    this.setDateRange(2)
  },
  updated () {
  },
  components: {

  },
  watch: {

  },
  methods: {
    /**
     * 2: 近七天 3:近30天 5:自定义(前一个月如当前月为7月，自然月为6月)
     */
    setDateRange (val) {
      var startDay = null
      var endDay = null
      if (val === 2) {
        startDay = -6
        endDay = 0
      } else if (val === 3) {
        startDay = -29
        endDay = 0
      } else {
        return
      }
      // 开始时间
      // var startTime = this.getTimeByDayNum(startDay) + '00:00:00'
      var startTime = this.getTimeByDayNum(startDay)
      // 结束时间
      // var endTime = this.getTimeByDayNum(endDay) + '23:59:59'
      var endTime = this.getTimeByDayNum(endDay)
      this.dateRange = [startTime, endTime]
      // this.dateRange3Param = [startTime + '00:00:00', endTime + '23:59:59']
      // console.log(this.dateRange3)
    },
    /**
     * 通过天数获取对应天数前的时间, 负数：多少天前, 正数：多少天后
     */
    getTimeByDayNum (dayNum) {
      var d = new Date()
      // d.setTime(d.getTime() + 24 * 60 * 60 * 1000 * dayNum)
      d.setDate(d.getDate() - 1 + dayNum)
      let mouth = d.getMonth() + 1 >= 10 ? d.getMonth() : '0' + (d.getMonth() + 1)
      // let day = d.getDate() >= 10 ? d.getDate() - 1 : '0' + (d.getDate() - 1)
      let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate()
      var time = d.getFullYear() + '-' + mouth + '-' + day + ' '
      return time
    },
  }
}
</script>

<style lang="scss">
.mod-home {
  .title-line {
    width: 100%;
    background: #f8f8f8;
    padding: 20px 14px;
    line-height: 26px;
  }
  .title-time {
    padding-left: 8px;
  }
}
</style>

可作为vue组件引入直接使用

如何写vue组件：等下写