如何更改 Ant 表头复选框

Question

我的应用程序中有一个表，我在其中对每一行使用 select 。

当我单击并选择行时，左上角会出现一个选中的复选框。 我不想显示该复选框，我想显示其他内容，例如带有文本的 div。仅当我单击一行中的复选框时，该 div 才会出现。

如何做到这一点？我试图找到呈现该复选框的事件，但我没有成功。如何访问该元素并在其他元素中更改它？沙箱链接：https://codesandbox.io/s/selection-ant-design-demo-vlftk?file=/index.js

Answer 1

我们可以将自定义组件设置为<Table />的道具rowSelection

内的

columnTitle

设置选择列的标题
类型：字符串|React.ReactNode

的文档

const rowSelection = {
  columnTitle: selectedRowKeys.length > 0 ? <div>XXX</div> : <></>,
  ...
}

<Table rowSelection={rowSelection} />;

Answer 2

现在有一种简单的方法使用

hideSelectAll

属性

<Table rowSelection={rowSelection} .... />

并将 rowSelection 设置为

const rowSelection: TableProps['rowSelection'] = {
  hideSelectAll: true,
  ....
}