问题描述：今天测试el-date-picker时间组件type="datetimerange"时，发现点击X清空图标，报vue.esm.js?efeb:628 [Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of null (reading '0')"，后来发现没对value做判断。
问题分析：在使用DatePicker日期选择器选择日期范围的时候，会用到一个属性clearable。这个属性是Boolean变量，用于决定是否显示清除按钮，默认为true。 当点击清除按钮的时候，value会被设置为null。所以会报错
解决方法：
//引入@change="getMyDateTime()"方法 <el-date-picker v-model="searchForm.dateTime" type="datetimerange" align="right" unlink-panels range-separator="至" :start-placeholder="searchForm.startDate" :end-placeholder="searchForm.endDate" :picker-options="pickerOptions" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="getMyDateTime()" ></el-date-picker>
getMyDateTime加判断
getMyDateTime() {
const _this = this.searchForm;
_this.startDate = _this.dateTime ? _this.dateTime[0] : dataTime.getBeforeDate(30);
_this.endDate = _this.dateTime ? _this.dateTime[1] : dataTime.getBeforeDate(0);
}
//设置dataTime.getBeforeDate是因为项目的默认时间是30天区间，如果不需要可以用""代替
标签： clearable, el-date-picker, element-ui, 时间, 时间控件, 时间组件
上面是“element-ui时间组件el-date-picker用x清空后报错解决方法”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。
当前网址：https://m.ipkd.cn/webs_2323.html
声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
