使用element ui 的日期插件搜索清空时报错
1.先贴上一张图，供您看一看
Error in v-on handler: “TypeError: Cannot read property ‘0’ of null”
我这报错报了一个 property ‘0’ 为null ，其实再仔细一看是用的ui 插件日期的报错
2.上代码给您分析一下
1.element ui 组件库
<el-date-picker v-model="ruleForm.changeTime" size="small" type="daterange"range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"value-format="yyyy-MM-dd" @change="searchList"></el-date-picker>
2.请求api接口获取开始时间和结束时间
startlastModifyDate: that.ruleForm.changeTime[0], //最后修改开始时间endlastModifyDate: that.ruleForm.changeTime[1] //最后修改结束时间
3.解决方案：虽说这样获取时间是正确的，但是没有判断当点击清空时的状态，导致控制台报出错误，
startlastModifyDate: that.ruleForm.changeTime!=null? that.ruleForm.changeTime[0]:'', //最后修改开始时间
endlastModifyDate: that.ruleForm.changeTime!=null? that.ruleForm.changeTime[1]:'', //最后修改结束时间
4.加上一个非空判断完美解决控制报出的错误、
欢迎大家进群进行技术性的探讨， 群号：954314851
使用element ui 的日期插件搜索清空时报错相关推荐
- element ui DatePicker 日期选择器 限制只能选择今天之前或者之后--选择范围时选中第一个后前面的日期应该是禁止状态
picker-options的值是一个对象,他的disabledDate属性可以设置禁用日期 time.getTime是把选中的时间转化成自1970年1月1日 00:00:00 UTC到当前时间的毫秒 ...
- 关于Element UI中日期时间选择器在IE浏览器中初始化显示的兼容性问题
一.简单说明 项目使用Vue+Element UI进行开发,使用了 DateTimePicker 日期时间选择器. 二.问题描述 打开修改对话框(进行选择日期操作可以正常显示),在谷歌浏览器中初始化时 ...
- 【Element UI】日期选择器el-date-picker 默认选中当前日期==＞ 不可选当日之前的日期
一个人能否合理表达自己的攻击性是健康与否的重要标准. 参考Element UI Element - The world's most popular Vue UI framework 目录 1.默认 ...
- Element UI格式化日期
如上图所示,我们再提交表单的时候,日期是需要转换成我们需要的模式的. 如果是使用vue的话,那就很方便处理了,只需要加上value-format格式化就可以. 代码如下: <el-form-it ...
- Element UI DatePicker 日期选择器
该组件选择周的时候,默认显示'xxxx年第x周',但在需求要显示为'xxxx年x月第x周(mm.dd - mm.dd)'或者'本周(mm.dd - mm.dd)',最终效果为 首先需要修改v-mode ...
- element ui DatePicker 日期选择器 限制只能选择今天之前或者之后
<el-date-pickerv-model="value1"type="date"placeholder="选择日期":picker ...
- element ui 下拉框搜索功能
正常的下拉框就是这样的,但是临时加需求 说需要下拉框里面的信息不存在或者太多的时候,希望自己搜索想要的数据 嗯~听产品的~解决了一下代码如下 <el-select :placeholder=&q ...
- 使用element UI的日期选择器时，默认显示当天日期。
需求:输入框中要把当天日期显示在输入框中 <el-form-item label="交易数据"><el-date-pickertype="date&qu ...
- element ui +mybatisPlus分页插件实现分页功能
elementui pagination插件 当然这里的依赖部分就需要去创库ctrl+v了 <!--分页部分 pagination插件 @current-change="handlep ...
最新文章
- 创建型模式--工厂方法模式
- Oracle 10g客户端的安装和配置
- leetcode 802. Find Eventual Safe States | 802. 找到最终的安全状态（有向图DFS）
- JMS 2.0中JMSContext的类型
- php如何给单选框加js事件,js给元素添加绑定事件
- Apache多站点配置
- 少年，这有套《街霸2》AI速成心法，想传授于你……
- python输出文本文件_Python进阶02 文本文件的输入输出
- python 生成二维码
- r语言 生成等差序列_使用序列模型生成自然语言
- tracert、traceroute、mtr、WinMTR
- 嵌入式ARM核心板介绍
- 百度地图级别与比例尺对照表
- 关于tomcat报错500的问题记录（classnotfoundexception）
- 独立的自动化智能系统——海格里斯（HEGERLS）直线双轨多层机器人RGV穿梭车
- 随机生成名字的Android页面
- 【ARM】Kylin V10/ARM平台上源码安装gcc 11.2
- kakfa安装与简单使用
- STM32数据手册中的ADC12、ADC123
- 微信公众平台接入机器人小黄鸡