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

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

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

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

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

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

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

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

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

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

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

Vue2 中,使用 `el-table` 的 `:span-method` 属性实现表格里某几个字段合并,关键在于在 `span-method` 方法中自定义返回对应需要合并数与列数。`span-method` 是 Element UI 表格组件中用于动态控制单元格合并的属性,通过函数返回 `{rowspan, colspan}` 对象来指定合并范围。该函数接收四个参数:当前数据 `row`、列信息 `column`、索引 `rowIndex` 列索引 `columnIndex` [^1]。 以下是一个示例代码: ```vue <template> <div> <el-table :data="tableData" :span-method="objectSpanMethod" border > <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="city" label="城市"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, city: '北京' }, { name: '张三', age: 20, city: '北京' }, { name: '李四', age: 25, city: '上海' }, { name: '李四', age: 25, city: '上海' }, { name: '李四', age: 25, city: '上海' }, ] }; }, methods: { objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0 || columnIndex === 1) { // 假设要合并姓名年龄列 if (rowIndex > 0) { if (this.tableData[rowIndex][column.property] === this.tableData[rowIndex - 1][column.property]) { return { rowspan: 0, colspan: 0 }; } else { let rowspan = 1; for (let i = rowIndex + 1; i < this.tableData.length; i++) { if (this.tableData[i][column.property] === this.tableData[rowIndex][column.property]) { rowspan++; } else { break; } } return { rowspan: rowspan, colspan: 1 }; } } else { let rowspan = 1; for (let i = rowIndex + 1; i < this.tableData.length; i++) { if (this.tableData[i][column.property] === this.tableData[rowIndex][column.property]) { rowspan++; } else { break; } } return { rowspan: rowspan, colspan: 1 }; } } } } }; </script> ``` 在上述代码中,`objectSpanMethod` 方法会对表格的每一每一列进遍历。当 `columnIndex` 为 0 或者 1 (也就是姓名年龄列),会判断当前上一对应字段的值是否相同。如果相同,就把当前的 `rowspan` 设为 0,`colspan` 设为 0,表示不显示;如果不同,就计算后续有当前对应字段的值相同,把这个数量作为 `rowspan` 返回,`colspan` 设为 1。
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值