el-date-picker中picker-options踩坑

el-date-picker中picker-options踩坑

场景：

在el-dialog中的el-form表单控件中，对日期进行限制：开始日期不能大于结束日期，结束日期不能小于开始日期; 关闭el-dialog，在重新打开时，对表单数据进行初始化，即清空表单数据；此处使用**=**对表单数据对象进行重新赋空值，导致日期的限制不能根据所选择日期进行限制，只会根据初始化的日期进行限制

比如：打开dialog的初始化日期是2023.7.4，若开始日期选择了2023.5.6，则结束日期应不可以选择2023.5.6之前的日期；现在是结束日期不可以选择2023.7.4之前的日期

data() {
	return {
		limitStar: {
			disabledDate: time => {
				if(formData.endDate) {
					return time.getTime() > new Date(formData.endDate).getTime()
				}
			}
		}
	}
}

在代码里重新用=赋值了el-form中v-model绑定的对象数据

<el-form
	ref="ref"
	:rules="rules"
	:model="formData"
>
	<el-date-picker
		v-model="formData.starDate
		:picker-options="limitStar"
		value-format="yyyy-MM-dd"
	>

以上代码，重新对formData变量进行了赋值

this.formData = {
	starDate: this.$moment(new Date().getTime()).format('YYYY-MM-DD')

导致开始日期-结束日期的限制不会随着日期变动而变动。原因是使用=赋值，会修改formData数据存储地址，导致picker-options中使用的formData根据初始地址查找，得到初始化的formData.starDate数据，而重新选择了日期后，重新选择的日期数据存储到了新地址，导致picker-options失效。应使用formData.starDate=x x x x。进行初始化，则此问题可解决。