关于 element 中 的slider 如何动态传入日期,日期为起始时间长度为15天

点击时间控件,选择某一天 的日期,滑动块默认显示最后的日期为选中的日期,滑块往前倒推15天。
例如,时间控件选中2020-11-16号
在这里插入图片描述
滑块显示最后一天时间为选中的时间,如下图
在这里插入图片描述
往前倒推15天的话,滑块开始时间为2020-11-02,如下图
在这里插入图片描述
那么每次选择时间控件的时候,我都要动态给滑块传入时间,那么怎么传入呢?话不多说,上代码。

html部分

<!-- 时间控件 -->
<el-date-picker
  v-model="checkDateEnd"
   value-format="timestamp"
   type="date"
   placeholder="请选择日期"
  >
</el-date-picker>

<!-- 滑块 -->
<el-slider
  v-model="setSelectDate"
  :step="1"
  :min="1"
  :max="15"
  :format-tooltip="formatTooltip"
  @change="changeDate"
  show-stops>
</el-slider>

js部分

export default {
	data() {
		return {
		checkDateEnd: null, //时间控件
        setSelectDate: 1,//slider滑块
        setSelectTime: '',//设置的时间
		},
		components: { },
		mounted() { },
		methods: {
        //滑块 自定义的格式化处理函数
        //选择时间控件之后,在选择的时间上,往前倒推15天
	      formatTooltip (val) {
	        if(this.checkDateEnd != null){
	          let time = this.checkDateEnd
	          if(val !== 15){
	            time = time - ((15-val) * 86400000)
	          }
	          this.setSelectTime = time
	          let nowDate = this.dateFormat(parseInt(time));//格式化时间
	          return nowDate
	        }else{
	          return;
	        }
	      },
	      //滑块选择时间时,发起请求
	      changeDate(){
	        this.$http.post('xxxxxxxxxxxxxx', {
	          checkDateEnd : this.setSelectTime
	        }, res => {
	          if (res.code === 0) {
	          //接口请求成功之后TODO
	          }
	        })
	      },
	      //时间格式化函数,此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
	      dateFormat(time) {
	        var date = new Date(time);
	        var year = date.getFullYear();
	        var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
	        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
	        // 拼接
	        return year + '-' + month + '-' + day;
	      }
		}
	};

这里面比较重要的就是format-tooltip这个属性,可以改变slider的刻度标签~~~,新手小白干啥都墨迹哈哈哈哈

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值