百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

element-ui表格组件el-table多选时报错

liuian 2025-02-15 00:06 46 浏览

项目中用 element-ui 的表格组件 el-table 渲染列表数据,刚开始进入页面数据为空时,第一列的全选勾选会直接是禁止状态,当表格有数据时全选勾选才是可选状态,这样是没问题的。

有数据时,全选按钮可勾选:

数据为空时,全选按钮为禁选状态:

但是当点击筛选项再次调后端接口查询时,当无数据时全选勾选框居然是可选状态,而且一勾选还会报错:Uncaught TypeError: Cannot read properties of null (reading 'forEach')

刚开始以为是 element-ui 的bug,再 github 仓库里搜了一圈好像也没人遇到类似的问题,最终翻看组件源码才找到问题所在:

上面的报错就是因为 el-table 的 data 数据呗传了一个 null 值进去,引起了报错。

在 element-ui的 el-table 源码中找到,全选狂的禁选判断状态是根据:store.states.data && store.states.data.length === 0,当我们直接传一个 null 进去时,根据判断全选勾选框是不会被禁选掉的,触发勾选事件时直接用 null 来 forEach 遍历引起了报错。

el-table 的文档上有明确 data 的类型为 array,所以如果正常传数组是没问题的,就怕遇到辣鸡后端啥空值都喜欢搞个 null,前端如果不处理下直接用就容易出问题。

相关推荐

数据标注接单平台(数据标注接单平台哪个挣得多一点)

数据标注员在家可以通过以下方式接单:1.在线平台:有许多数据标注平台允许数据标注员在家完成标注任务,例如标注客、标注助手、数据堂等。这些平台提供了在线标注工具和API接口,让数据标注员可以在家里使用...

电脑垃圾怎么清理系统垃圾(电脑垃圾怎么清理干净)

电脑清理c盘空间只留系统的操作方法如下。1、打开电脑,找到我的电脑,双击我的电脑,找到盘符C的系统盘。2、找到“属性”菜单。3、点击“属性”后,系统会出现一个新的界面,在新的界面,我们找到“磁盘清理”...

显卡推荐性价比2025(显卡2020性价比)

2021年买1000块钱的这种显卡性价比最好的还是小米的显卡比较好,因为小米的电子产品呢是比较好的一款它的质量是比较好的,也是比较靠谱的,尤其是1000块钱以内买的这种显卡呢他的内存是比较大的,所以价...

thinkpad原厂系统重装方法(thinkpad如何重新装系统)

若需重装原装系统,需备份系统数据,制作启动盘或将原装系统镜像刻录至光盘或USB。进入BIOS设置,启动优先选项设定为启动盘,重启电脑。按提示选择新系统安装位置。安装完成后更新系统和驱动程序。最后恢复数...

安装系统教程win10(安装系统教程win7)

正确安装win10系统的步骤如下:1.确认电脑是否满足win10系统的最低配置要求,如CPU、内存、硬盘空间等。2.下载win10系统镜像文件,可以通过微软官网或第三方下载网站获取。3.制作U盘...

pps影音手机版下载官网(pps影音百科)

区别:1,爱奇艺主打网页播放,PPS主打客户端播放器;2,爱奇艺视频正版高清,PPS不全是高清,有部分盗版;3,爱奇艺在线播放比较好,PPS的P2P加载技术打开视频较快。1、爱奇艺PPS影音其实是爱...

百度官方下载安装免费(百度官网免费下载)

你好!有两种方法可以免费下载!第一:加入百度文库VIP看百度文库的说明,只要加入百度文库的VIP即可免费下载,不过不推荐这种还是需要花钱的方式第二:下载冰点下载器那这种方法该如何免费下载呢?下面我详细...

windows10更新文件在哪里(win10系统更新文件在哪个文件夹)
windows10更新文件在哪里(win10系统更新文件在哪个文件夹)

win10自动更新下载的文件位于C:\Windows\SoftwareDistribution\Download文件夹中。当然我们要找到哪个文件夹确切到哪个补丁并不是那么容易的,因为命名的文件夹都是长长的一段代号,一般我们要删除更新文件的...

2026-01-02 03:55 liuian

扫描仪怎么安装(信鸽扫描仪怎么安装)

扫描仪的安装步骤可能会略有不同,具体取决于您所使用的扫描仪品牌和型号。一般而言,您可以按照以下基本步骤来安装扫描仪:确认您的计算机系统符合扫描仪的最低系统要求。在计算机上插入扫描仪的安装光盘,或从制造...

u盘怎么启动重装系统(u盘启动重装系统哪个好)

1.下载好系统之家U盘以后在电脑上插入U盘并打开软件,软件会自,动配置用户的电脑信息,点击制作U盘启动盘。2.接着就进入了选择系统的界面,在这里选择需要安装的系统版本,然后点击开始制作。3.弹出提示窗...

photoshopcs6哪一年的(pscs6版本好用吗)

pscs6的发行时间是2012年4月24日,该软件是是AdobePhotoshop的第13代,具有多种功能,包括内容识别修补、Mercury图形引擎/3D性能提升/3D控制功能/改良的设计工具/全新的...

电脑如何设置自动关机win10(win10系统电脑怎么设置自动关机)

windows10自动关机设置方法如下1、打开电脑管家主界面,点击右下角的“工具箱”;2、在工具箱的其他分类中选择打开“健康小助手”;3、健康小助手中有三项功能,护眼配色、定时休息和定时关机,点击定时...

wan口未连接是欠费吗(wan口未连接是怎么回事)

网费欠费了路由器WAN指示灯常亮不闪烁,一个灯亮。路由器正常工作的话,电源指示灯是常亮状态,SYS系统指示灯和WAN指示灯会闪亮,尤其是WAN指示灯的状态有些复杂:如果WAN指示灯不亮,说明网络连接有...

如何用手机修复sd卡(如何用手机修复sd卡受损)

第一步:将要修复的内存卡,用读卡器连接到电脑上,然后下载失易得数据恢复软件。    第二步:运行软件,选择要恢复的“u盘/储存卡”功能。注:在恢复数据之...

惠普台式机bios设置(惠普台式机bios设置核显内存)

1、按电源键启动电脑,在屏幕刚亮时,不停点击F10按键,就可以进入BIOS界面;2、如果F10没反应,则在启动时不停点击ESC键;3、这个时候会进入到启动菜单选项,F10BIOSSetup就是BI...