Virtualized Table 添加多选框

在AntD的虚拟化表格（Virtualized Table）中添加多选框通常涉及两个主要步骤：

1. **引入所需组件**[^1]:

   import { Table, Input, Checkbox } from 'antd';

2. **配置列定义**:

   const columns = [
     {
       title: '选择',
       dataIndex: '',
       render: (text, record) => (
         <Checkbox checked={record.selected} onChange={() => handleCheckboxChange(record)} />
       ),
     },
     // 其他列...
   ];

`dataIndex` 是空的，因为我们不打算显示单元格内容，而是只关心复选框。

3. **处理多选状态**:

   const handleCheckboxChange = (record) => {
     if (record.checked) {
       // 当勾选时执行操作，如更新状态或触发事件
       setSelectedRecords([...selectedRecords, record]);
     } else {
       // 取消勾选时执行操作
       setSelectedRecords(selectedRecords.filter(r => r !== record));
     }
   };
   
   // 初始化已选记录数组
   const selectedRecords = [];

4. **渲染表格**:

   <Table
     rowKey={(record) => record.key}
     rows={rows}
     columns={columns}
     onCheck={(checkedRowKeys, changedRows) => {
       // 处理多选状态更改
       setSelectedRecords(changedRows.map(row => row.key));
     }}
   />

其中，`onCheck`属性用于监听多选状态的变化。当你在表格中点击多选框时，它会触发`handleCheckboxChange`函数来更新`selectedRecords`。