el-select和date-picker数据联动效果

在很多项目中都要求通过select选择一个时间点，date-picker渲染用户选择的时间范围，主要效果如下图所示：

但是在做的过程中可能会很多问题，最让人头疼的是双向数据绑定，数据层更新了，视图层不能同步更新的问题。

首先先分享本demo的代码：

<template>
	<div class="home">
		<template class="select">
			<el-select v-model="choseValue" placeholder="请选择" @change="getFormateDay">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
		</template>
		<span class="demonstration" style="padding-left:30px">请选择时间:</span>
		<el-date-picker v-model="dates" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
		</el-date-picker>
	</div>
</template>

<script>
export default {
	name: 'Home',
	data() {
		return {
			// select的默认值
			choseValue: '2',
			// 选择的时间
			dates: [],
			// select 的选项
			options: [
				{
					value: '1',
					label: '今日'
				},
				{
					value: '2',
					label: '近一周'
				},
				{
					value: '3',
					label: '近一个月'
				}
			]
		}
	},
	methods: {
		fun_date(aa) {
			var date1 = new Date()
			date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate() // time1表示当前时间
			var date2 = new Date(date1)
			date2.setDate(date1.getDate() + aa)
			var time2 = date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate()
			return time2
		},
		// 初始化时间
		Init() {
			this.dates[0] = this.fun_date(-7)
			this.$set(this.dates, 0, this.dates[0])
			this.dates[1] = this.fun_date(0)
			this.$set(this.dates, 1, this.dates[1])
		},
		// 根据选择的value来渲染时间
		getFormateDay() {
			if (this.choseValue === '1') {
				this.dates[0] = this.fun_date(0)
				this.$set(this.dates, 0, this.dates[0])
				this.dates[1] = this.fun_date(0)
				this.$set(this.dates, 1, this.dates[1])
			} else if (this.choseValue === '3') {
				this.dates[0] = this.fun_date(-30)
				this.$set(this.dates, 0, this.dates[0])
				this.dates[1] = this.fun_date(0)
				this.$set(this.dates, 1, this.dates[1])
			}
		}
	},
	// 初始化给一个默认的时间
	created() {
		this.Init()
	}
}
</script>
<style scoped>
</style>

解决双向数据绑定中数据层更新视图层不同步更新的问题：

 本demo中，date-picker绑定的是一个数组。在查资料的时候尝试过date.push()方法，和date[0]=某一个值，date[1]=某一个值，从控制台可以看到数据已经发生了改变，但是视图层仍然没有更新，后面尝试过this.$forceUpdate()强制刷新，但是还是没使视图层更新。

最终解决的方式是:this.$set()

this.$set()的功能是向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新

第一个参数表示的是对象，第二个参数表示的是更新的位置，第三个参数表示的是更新后的值

至此，问题就解决了。

温馨提示：选择了某个选项，且视图层强制更新后还没更新date-picker的值，此时就该检查el-select是否绑定了一个@change事件，以本demo为例，我的el-select上应该加上@change="getFormateDay"