Ant Design 的表格组件中 rowSelection中的columnTitle支持自定义渲染一个图标
时间: 2024-02-16 09:05:12 浏览: 33
是的,Ant Design 的表格组件的 `rowSelection` 属性中的 `columnTitle` 支持自定义渲染一个图标。可以通过自定义 `columnTitle` 的 render 函数来实现。
具体实现步骤如下:
1. 在 `columns` 中添加一个 `selectionColumn` 列,用于渲染复选框。
```jsx
const columns = [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Address',
dataIndex: 'address',
},
{
title: '',
dataIndex: 'selectionColumn',
width: 50,
render: (_, record) => <Checkbox checked={selectedRowKeys.includes(record.key)} />,
},
];
```
2. 在组件的 `state` 中添加一个 `selectedRowKeys` 数组,用于保存选中的行。
```jsx
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
```
3. 在 `Table` 组件中设置 `rowSelection` 属性,其中 `columnTitle` 自定义渲染一个图标。
```jsx
const rowSelection = {
selectedRowKeys,
onChange: (keys) => {
setSelectedRowKeys(keys);
},
columnTitle: () => <StarOutlined />,
};
<Table
columns={columns}
dataSource={data}
rowSelection={rowSelection}
/>
```
这样就可以在 `rowSelection` 的复选框列旁边渲染一个图标了。需要注意的是,图标的样式需要自己定义。另外,当选中的行数较多时,建议将选中的行数显示在 `columnTitle` 旁边,以便用户知道当前选中了多少行。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)