ElementUI DatePicker日期选择器清除后报错！

最新推荐文章于 2024-08-20 14:14:38 发布

ctsyolo

最新推荐文章于 2024-08-20 14:14:38 发布

阅读量1.3k

点赞数 1

文章标签： elementui

本文链接：https://blog.csdn.net/ctsyolo/article/details/134260816

版权

文章讲述了在使用ElementUI的el-date-picker组件时，遇到点击清除按钮后控制台报错的问题，原因是data被赋值为null。解决方法是通过在赋值前判断value是否为null，避免出现错误。

摘要由CSDN通过智能技术生成

使用el-date-picker组件，默认带了clearable这个属性，这个属性是用于显示清除按钮，我们点击这个按钮，控制台会报如下错误：我们的代码如下:

const handleDateChange = (value: any) => {
	// value 是一个数组，包含用户选择的开始和结束日期
	state.queryForm.startDate = value[0]
	state.queryForm.endDate = value[1]
}

问题产生的原因

当点击清除后，data被赋值为null 所以报错了

解决方法

可以先进行判断为null就不进行赋值了

const handleDateChange = (value: any) => {
	// value 是一个数组，包含用户选择的开始和结束日期
	state.queryForm.startDate = value ? value[0] : undefined
	state.queryForm.endDate = value ? value[1] : undefined
}

const handleDateChange = (value: any) => {
	// value 是一个数组，包含用户选择的开始和结束日期
	state.queryForm.startDate = value ? value[0] : ""
	state.queryForm.endDate = value ? value[1] : ""
}