vue日期选择器 （快捷部分内容修改为自定义时间范围）

第一张是element-ui自带效果，第二张是替换成自定义时间范围

看官方文档可知，最近一周的文字及函数是存放在shortcuts里的。shortcuts里包含了两部分内容。一部分是文本text，另一部分是当前文本的点击事件。所以只要将需要放置的内容遍历存放进去就行了

我是给了一个按钮button，打开一个弹框，弹框开启时，就调用接口将数据填到时间组件里

<template>	
    <el-button
	     @click="open"
	   >
     回放
   el-button>
template>

	// Data部分
	Data() {
		return {
			pickerOptions: { shortcuts: [] },
      		shortcuts: [],
      		text: ''
		}
	}
	

	// 添加函数部分，调用接口获取数据后遍历数据
	open() {
		getData().then(res => {			
			res.forEach( item => {
				this.text = "开始时间：" + item.startTime + "结束时间：" + item.endTime
				const start = new Date(item.startTime)
				const end = new Date(item.endTime)
				// cut：存放的是内容  onclick：每一个text对应的点击事件
				var cut = {
					text: this.text,
					onClick(picker){
						picker.$emit('pick', [start, end])
					}
				}
				this.shortcuts.push(cut)
			})
			this.pickerOptions = { 'shortcuts': this.shortcuts }
		}
	})