element中通过外部按钮来修改日期选择器的范围

前言

这篇文章来为大家讲解的是在Vue中使用element-ui的时候，在使用ui库中的一个日期选择器这个模块的时候，我们可以通过日期选择器外部的事件来操作日期选择器的范围，因为element中的日期选择器自带的范围控制是在日期选择器里面，当我们的需求是在外面的时候，这时候就会有些困惑了，但是这篇文章将带你解决这个难题

一、效果图展示

二、代码展示

<template>
    <div class="time">
      <div class="t">
        <span
          v-for="(item,index) in xuanxiang"
          :key="index"
          @click="fn(index)"
          :class="{active:index==isShowtime}"
        >{{item}}</span>
        <el-date-picker
          v-model="valuetime"
          type="daterange"
          format="yyyy.MM.dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"  
          @change="time"
        ></el-date-picker>
        <!-- value-format="timestamp" 是将绑定值的格式设置为时间戳格式 -->
      </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      valuetime: "",
      xuanxiang: ["全部", "最近一周", "最近一月", "今日"],
      isShowtime: NaN
    };
  },
  methods: {
    fn(e) {
      const start = new Date();
      var zhou = start.getTime() - 3600 * 1000 * 24 * 7;   //获取一周以前的时间戳
      var yue = start.getTime() - 3600 * 1000 * 24 * 30;   //获取一个月以前的时间戳
      this.isShowtime = e;
      if (this.xuanxiang[e] == "最近一周") {
        this.valuetime = [zhou, start.getTime()];  //对时间选择器赋值   一周以前的时间-今天的时间
      } else if (this.xuanxiang[e] == "最近一月") {
        this.valuetime = [yue, start.getTime()];   //对时间选择器赋值   一个月以前的时间-今天的时间
      } else if (this.xuanxiang[e] == "今日") {
        this.valuetime = [start.getTime(), start.getTime()];   //对时间选择器赋值   今天的时间-今天的时间
      } else if (this.xuanxiang[e] == "全部") {
        this.valuetime = [];    //全部时间意思就相当于是不需要这个时间选择器了，直接清空就好
      }
    },
    time() {
      this.isShowtime = NaN;  //当手动修改时间选择器的时候，清除标签选择的样式
    }
  }
};
</script>
<style scoped>
::v-deep .el-date-editor .el-range-separator {
  width: 6%;
}
span {
  border: 1px solid rgba(155, 155, 155, 1);
  border-radius: 4px;
  color: #555;
  display: inline-block;
  padding: 1px 10px;
  font-size: 14px;
  cursor: pointer;
  margin-right: 15px;
}
span.active {
  background: rgba(95, 164, 235, 1);
  border: 1px solid rgba(95, 164, 235, 1);
  color: #fff;
}
</style>

三、对这个功能的理解

这个小功能其实很简单，就是在实现的时候，你会看element文档中的代码，看完之后就会有点蒙，但是你只要把思路给调整好，其实很容易解决的，很多问题都是这样，千万不要把它想像的太复杂了，就比如这个功能，就是赋一下值的事就可以解决了。

结语

希望这篇文章可以给你的项目带来帮助，也希望对你之后的开发有所帮助