实现
点击表格当前
行选中或
取消，可以通过以下步骤实现：
1. 在
表格的 columns 中添加一个 render 函数，用于渲染
复选框列。render 函数需要返回一个 antdv 的 Checkbox 组件，并设置其 checked 属性为当前
行是否
选中的状态。
2. 在
表格的 rowSelection 对象中，设置 onChange 回调函数。该回调函数会在
复选框选中或
取消选中时触发。在该回调函数中，可以获取到当前
选中的
行的 key 值，然后将其保存到一个数组中。
3. 在
表格的 onRow 属性中，设置一个 onClick 回调函数。该回调函数会在当前
行被
点击时触发。在该回调函数中，可以根据当前
行的 key 值来判断该
行是否被
选中，如果已经被
选中，则
取消选中；否则
选中该
行。
完整代码如下：
```jsx
import React, { useState } from 'react';
import { Table, Checkbox } from 'antd';
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
];
export default function App() {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const onSelectChange = (selectedRowKeys) => {
setSelectedRowKeys(selectedRowKeys);
};
const onRowClick = (record) => {
const key = record.key;
const index = selectedRowKeys.indexOf(key);
if (index > -1) {
setSelectedRowKeys([...selectedRowKeys.slice(0, index), ...selectedRowKeys.slice(index + 1)]);
} else {
setSelectedRowKeys([...selectedRowKeys, key]);
}
};
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
{
title: '',
key: 'selection',
render: (_, record) => (
<Checkbox checked={selectedRowKeys.includes(record.key)} />
),
},
];
const rowSelection = {
selectedRowKeys,
onChange: onSelectChange,
};
return (
<Table
dataSource={data}
columns={columns}
rowSelection={rowSelection}
onRow={(record) => ({
onClick: () => onRowClick(record),
})}
/>
);
}
```
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
