先看两个图
图1:为什么下面都没选,上面全选框是半选状态操作步骤:
1.点全选
2.手动取消这两行的勾选
图2:为什么下面都选了,上面全选框也是半选状态
操作步骤:
1.手动勾选这两行
如上图所示,el-table组件合并行和多选一起使用,可能会出现实际选中的行不是自己能看见的预期的行,从而导致一些BUG
图1原因分析:
这里赋值给table的数据是一个有三个对像数组,然后有两行合成了一行,当点全选时,会选中这三行的数据(虽然页面上只显示了两行),然后我手动把两个都取消勾选,但实际上还是有一行数据处于选中状态,无法手动取消,只能通过上面的全选框可以全部取消。
图2原因分析:
当这三个数据都选中时才是真正的全选,全选框才是全选状态,而我手动勾选下面两行,还剩下合并行的另外一行没办法勾选,所以是半选状态
解决思路:
1.当我们勾选某行时,如果这行是合并行,还需要手动调toggleRowSelection方法让合并行的其它的行一起选中(如果不这样做,你手动勾选所有行后,全选框是半选状态,不是全选状态),如图2
2.当我们一旦勾选了全选,实际也选择了我们看不到的合并行,当我们取消勾选某行时,如果这行是合并行,也需要手动调toggleRowSelection方法让合并行的其它行一起取消,这样才是真的从数据层面取消了该合并行
3.除了用到toggleRowSelection方法,你可能还需要用到@select-all和@select
希望对遇到此问题的小伙伴有帮助