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

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

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

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

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

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

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

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

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

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

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
要实现Vue3 Element-Plus的el-table汇总单元格合并,你可以使用`span-method`属性来定义一个函数,该函数可以返回每个单元格需要合并数和列数。下面是一个示例代码: ```html <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-column label="合计" :span-method="objectSpanMethod"> <template #default="{ rows, row, column, $index }"> <span v-if="$index === 0">{{ row.total }}</span> </template> </el-table-column> </el-table> ``` 在上面的代码,我们定义了一个`objectSpanMethod`方法,并将其赋值给`span-method`属性。这个方法接收四个参数:`{ rows, row, column, $index }`。其`rows`是当前列的所有数据,`row`是当前数据,`column`是当前列数据,`$index`是当前的索引。 下面是`objectSpanMethod`方法的实现: ```js methods: { objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 3) { if (rowIndex === 0) { return { rowspan: this.tableData.length, colspan: 1 }; } else { return { rowspan: 0, colspan: 0 }; } } } } ``` 在上面的代码,我们检查当前列是否为第四列(即“合计”列),如果是,我们检查当前是否为第一。如果是,我们返回一个对象`{ rowspan: this.tableData.length, colspan: 1 }`,其`rowspan`表示当前单元格需要合并数,`colspan`表示当前单元格需要合并的列数。如果当前不是第一,则返回一个空对象`{ rowspan: 0, colspan: 0 }`,表示当前单元格不需要合并。 这样,我们就可以实现Vue3 Element-Plus的el-table汇总单元格合并了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值