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绑定的对象数据


	

以上代码,重新对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。进行初始化,则此问题可解决。

你可能感兴趣的:(vue.js,elementui,javascript)