vue element el-table组件,当合并行(span-method)和多选一起使用时,可能会出现实际选中的行不是自己能看见的预想的行

本文深入探讨el-table组件在合并行与多选功能结合使用时出现的半选状态BUG,分析其背后的原因,并提供解决方案,包括正确使用toggleRowSelection方法及监听@select-all和@select事件。

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

先看两个图
图1:为什么下面都没选,上面全选框是半选状态在这里插入图片描述操作步骤:
1.点全选
2.手动取消这两行的勾选

图2:为什么下面都选了,上面全选框也是半选状态
在这里插入图片描述操作步骤:
1.手动勾选这两行

如上图所示,el-table组件合并行和多选一起使用,可能会出现实际选中的行不是自己能看见的预期的行,从而导致一些BUG

图1原因分析:
这里赋值给table的数据是一个有三个对像数组,然后有两行合成了一行,当点全选时,会选中这三行的数据(虽然页面上只显示了两行),然后我手动把两个都取消勾选,但实际上还是有一行数据处于选中状态,无法手动取消,只能通过上面的全选框可以全部取消。

图2原因分析:
当这三个数据都选中时才是真正的全选,全选框才是全选状态,而我手动勾选下面两行,还剩下合并行的另外一行没办法勾选,所以是半选状态

解决思路:
1.当我们勾选某行时,如果这行是合并行,还需要手动调toggleRowSelection方法让合并行的其它的行一起选中(如果不这样做,你手动勾选所有行后,全选框是半选状态,不是全选状态),如图2

2.当我们一旦勾选了全选,实际也选择了我们看不到的合并行,当我们取消勾选某行时,如果这行是合并行,也需要手动调toggleRowSelection方法让合并行的其它行一起取消,这样才是真的从数据层面取消了该合并行

3.除了用到toggleRowSelection方法,你可能还需要用到@select-all和@select

希望对遇到此问题的小伙伴有帮助

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值