antd table表头多选框onSelect详解

概述

antd table是一款优秀的React组件库，提供了丰富的表格功能。表头多选框是其重要的一个功能，可以让用户快速选中需要的列，方便数据展示。 本文将详细讲解antd table表头多选框的onSelect用法。

基本用法

在antd table中，通过设置rowSelection属性可以实现表头多选框的显示。其中，可以使用onSelect回调函数来监听表头多选框的勾选事件。 具体代码如下：

```javascriptconst rowSelection = { onSelect: (record, selected, selectedRows) => { console.log(record, selected, selectedRows); },};;```

通过设置onSelect回调函数，当用户勾选或取消勾选表头多选框时，就能触发此函数。 函数的三个参数分别是：record当前勾选的行数据；selected勾选状态；selectedRows已选中的所有行数据。

进阶用法

antd table的表头多选框不仅仅能监听勾选事件，还可以绑定到自定义组件上进行更复杂的交互。下面介绍两个实用的进阶用法：

禁用表头多选框

在某些情况下，可能需要禁用表头多选框，只允许用户在每行数据前勾选复选框。此时，可以在表头多选框中嵌入一个禁用的复选框即可。 具体代码如下：

```javascriptconst rowSelection = { columnWidth: '50px', fixed: true, type: 'checkbox', selections: [ { key: 'all-data', text: '全部数据', onSelect: () => {}, }, ], renderCell: () => { return ; }, onSelect: (record, selected, selectedRows) => { console.log(record, selected, selectedRows); },};;```

在代码中，我们通过设置columnWidth和fixed属性，让表头多选框嵌入到第一列的固定位置。 然后，通过设置selections来隐藏表头多选框中的全选和取消按钮。 最后，在自定义的renderCell函数中返回一个禁用的复选框，就实现了禁用表头多选框的效果。

自定义表头多选框

在某些情况下，可能需要将表头多选框替换为自定义的组件，例如一个下拉框。此时，可以通过自定义renderSelection函数来实现。 具体代码如下：

```javascriptconst rowSelection = { columnWidth: '50px', fixed: true, type: 'checkbox', selections: [ { key: 'all-data', text: '全部数据', onSelect: () => {}, }, ], renderSelection: (selectedRowKeys) => { return ( 操作1 操作2 ); }, onSelect: (record, selected, selectedRows) => { console.log(record, selected, selectedRows); },};;```

在代码中，我们通过设置type属性为checkbox，表头多选框的样式变成了复选框； 然后，通过自定义的renderSelection函数返回一个Select组件，用来替换表头多选框。 在函数中，我们可以获取当前已选中的行数据，来做一些具体的操作。

总结

通过几个示例，我们详细讲解了antd table表头多选框的onSelect用法。 antd table的表格功能非常强大，熟练掌握其用法可以大幅提高开发效率。