如何更改Ant表头复选框 [英] How to change Ant table header checkbox

问题描述

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

I have a table in my application, where I use select for each row.

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

When I click on and select row, on the top-left corner appears a checked checkbox. I don't want to display that checkbox, I want to display something else, a div with a text for example. That div should appear only when I click on a checkbox from a row.

如何执行此操作?我试图找到呈现该复选框的事件，但没有进行管理.如何访问该元素并在其他元素中进行更改?链接到沙箱: https://codesandbox.io/s/selection-ant-design-demo-vlftk?file=/index.js

How to do this? I tried to find the event that renders that checkbox, but I didn't manage. How to access that element and to change it in other else? link to sandbox: https://codesandbox.io/s/selection-ant-design-demo-vlftk?file=/index.js

推荐答案

我们可以在<Table />

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

Set the title of the selection column
Type: string|React.ReactNode

引用:附加表rowSelection

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

<Table rowSelection={rowSelection} />;

这篇关于如何更改Ant表头复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！