element-plus 日期时间组件的奇怪问题 TypeError: Cannot read properties of null (reading ‘insertBefore‘)

博客内容涉及前端UI框架中日期时间选择器与表格组件交互导致的异常问题。用户在选择日期后,时间选择器出现点击无反应并引发页面报错。经过排查,问题根源在于table组件的插槽中存在未定义的变量goodsInfoList。通过添加条件判断解决了该问题,但仍未明确为何table组件会影响日期选择器,尤其是单日期选择器,而不会影响日期范围选择器。解决方案来源于element-plus框架的issues讨论。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

重现步骤

1.通过日期时间选择器选择日期
2.打开包含table的弹窗
3.关闭弹窗
4.重新选择日期

日期时间选择器点击无反应且页面报错

1.鼠标移入时间选择器报错如下
在这里插入图片描述
2.鼠标移出时间选择器报错如下
在这里插入图片描述
3.点击空白处报错如下
在这里插入图片描述
报错信息都是指向框架源码,看不出具体信息。
搜索半天没找到具体原因和解决方案,最终在element-plus的issues中发现类似问题以及解决思路(似乎是因为table数据影响)
在这里插入图片描述
在这里插入图片描述
附issues地址:https://github.com/element-plus/element-plus/issues/5365

然后通过排查定位到table的插槽中,变量goodsInfoList存在undefined的情况。
在这里插入图片描述
加个判断能解决问题
在这里插入图片描述
但是还是不知道为啥table组件会影响到时间组件,而且只影响单日期选择器,日期和时间范围选择器则不受影响,其他组件也不受影响。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值