rowSelection不支持rowSpan和colSpan

[JasonKid]

• antd 版本: 2.1.0
• 操作系统及其版本: Linux
• 浏览器及其版本: Chrome

您做了什么？

我对第一列的部分行做了rowSpan，但是希望rowSelection也进行rowSpan

现在有一些数据：

[{
    keyword: "键盘",
    brand: "Cherry"
},{
    keyword: "键盘",
    brand: "雷柏"
},{
    keyword: "键盘",
    brand: "雷蛇"
},{
    keyword: "手表",
    brand: "Omega"
},{
    keyword: "手表",
    brand: "劳力士"
}]

您期待的结果是：

实际上的结果是：

无此功能
截图中的最左列的选择框是我独立实现的选择框，与keyword列同步了rowSpan属性。如果rowSelection支持rowSpan等属性的话，我们就不需要去实现交互（全选等）了。

可重现的在线演示

无

[afc163]

最好具体一点，能提供截图、代码、最好是在线演示。

[JasonKid]

咦，这个编辑了issue不会通知到你们的咩？
手动 @afc163

[yesmeck]

以上面的图为例，在选择“键盘”的时候，其实是同时选中了三行，但是现在 rowSelection 的onSelect是针对选择一行的情况，onSelectAll是针对全选的情况，现在没办法去执行这两个 callback。

是不是调整下 onSelect，返回的 record改成数组（会照成不兼容）？或者在选择单行的时候返回单个的 record，选择多行的时候返回 record[]（可能会让人困惑）。

@JasonKid 有什么想法吗？不知道你们自己的实现是怎么设计的。

[JasonKid]

因为我们这边只需要返回相应的已选择的keyword列表，所以我这边的实现只做了UI层面的合并，当提交的时候只提取了每一项的第一行的keyword（因为每项的每一行的keyword都是一样的）。

如果考虑到onSelect和onSelectAll的回调，我建议增加接受的dataSource的形式。
例如现在的表头可以用children属性来定义表头的分组，我的想法是dataSource中也可以接受类似形式的数据，来进行自动分组，而rowSelection则与最前一列（也就是rowSpan最大的一列）相匹配。

[benjycui]

例如现在的表头可以用children属性来定义表头的分组，我的想法是dataSource中也可以接受类似形式的数据，来进行自动分组，而rowSelection则与最前一列（也就是rowSpan最大的一列）相匹配。

Table[dataSource] 的 children 已经有语义了 https://ant.design/components/table/#components-table-demo-expand-children

[JasonKid]

所以我说类似语义

[liu2080019]

@JasonKid 贾森基德，最终你们怎么解决的啊

[syaivin]

@JasonKid 项目中也碰到这个问题了，您有解决办法了吗？

[syaivin]

@afc163 看这好多次了还是没想出办法，checkbox.group 做出效果来，可总有不适用的地方；能给我说说思路吗？

[afc163]

@syaivin 这里还 open 说明官方目前也没有解决方案。

[syaivin]

@afc163 好的，谢谢~

[yoyo837]

附上我的场景来参与讨论：
，肯能需要对应某列来合并。

[yoyo837]

@afc163 @yesmeck 我项目需要准备实现这个功能，看antd项目组有意增加此功能不？如果有，基于什么理论基准提供PR参考？如果没有我就只按自己需要来实现。

[francecil]

已使用checkbox实现（代码较耦合），

或者，其实这类需求大部分可以转换成 ：

1. 数据源转换：将相同key多个元素变成单个元素

[{
  key:'a',
  name:'a1',
  value:'111'
},{
  key:'a',
  name:'a1',
  value:'222'
},{
  key:'a',
  name:'a2',
  value:'333'
}]
=>
[{
  key:'a',
  names:[{
    name:'a1',
    values:[{
      value:'111'  
      },{
      value:'222'  
    }]
  },{
    name:'a2',
    values:[{
      value:'333'  
    }]
  }]
}]

2. 取消行合并

数据是单行而非多行的行合并，原先的多行数据用样式（Divider）来控制

而不是靠Table实现

[freya0608]

so solved?

[Y80]

rowSelection.renderCell() 仅能提供勾选框的渲染能力，返回的节点是作为 <td /> 的子元素，这样子还是不能实现勾选框单元格的合并，我们想要的是控制 td.rowSpan 的 API 呀！
@zombieJ
@afc163

[Y80]

rowSelection.renderCell() 仅能提供勾选框的渲染函数，返回的节点是作为 <td /> 的子元素，这样子还是不能实现勾选框单元格的合并，我们想要的是控制 td.rowSpan 的 API 呀！ @zombieJ @afc163

可以提供一个和 column.onCell() 相同的 API 吗？

[viewweiwu]

@Y80

#3505 (comment)
大概是需要这样的效果吧，打的码可能有点重，凑合着看。

官方没有提供选择行的 onCell 实在太一行了。

具体实现思路就是自己 render 出来 checkbox。

[yanghuanrong]

rowSelection.renderCell() 可以提供勾选框的渲染函数，返回的节点只是作为<td />子的，这样子还是不能实现勾选框格的合并，想要控制的是 td.rowSpan 的元素的 API 呀！@zombieJ @afc163

可以提供一个和 column.onCell() 相同的 API 吗？

这样可以实现合并rowSelection

          renderCell(checked, row, index, origin_node) {
            return {
              children: origin_node,
              props: {
                disabled: row.disabled,
                rowSpan: row.row_span
              }
            }
          },

但是却会收到警告

Warning: `columns.render` return cell props is deprecated with perf issue, please use `onCell` instead. 

没有提供 rowSelection.onCell() 的api, 导致无法消除这个警告，没有其他更好的办法了吗？

[Y80]

@viewweiwu #3505 (comment)
@yanghuanrong #3505 (comment)

没有想到 rowSelection.renderCell() 可以返回 {children: ..., props: {...}}，去看了下源码

renderSelectionCell 就是rowSelection.renderCell() 的返回，返回中的 props 可以挂载到包裹 checkbox 的那个 td 标签上，那么可以据此给出一种解决方案：

• 演示地址
• StackBlitz

[viewweiwu]

@Y80 这样显示效果的是对的了，但是全选会选择 3 条， emm 也算还行吧。
但我觉得既然已经合并了选中框，被合并了的数据，选中应该算一条。
其实我这边二次封装过 antd 表格，感兴趣可以看一下这个 Demo。
https://stackblitz.com/edit/react-ts-hxbsdz?devToolsHeight=33&file=index.tsx