antd合并table多选框
时间: 2023-08-10 19:35:06 浏览: 166
在 Ant Design 的 Table 组件中,可以通过 `rowSelection` 属性来添加多选框。如果需要合并单元格,可以通过设置 `rowSpan` 和 `colSpan` 来实现。
以下是一个示例代码:
```jsx
import { Table } 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'
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park'
}
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
colSpan: 2, // 合并两列
render: (text, record, index) => {
const obj = {
children: text,
props: {}
};
if (index === 0) {
obj.props.rowSpan = 2; // 合并两行
}
if (index === 2) {
obj.props.rowSpan = 0; // 不渲染
}
return obj;
}
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
colSpan: 0, // 不渲染
render: (text, record, index) => {
const obj = {
children: text,
props: {}
};
if (index === 0) {
obj.props.rowSpan = 2; // 合并两行
}
if (index === 2) {
obj.props.rowSpan = 0; // 不渲染
}
return obj;
}
},
{
title: 'Address',
dataIndex: 'address',
key: 'address'
}
];
function onChange(selectedRowKeys, selectedRows) {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
}
<Table
rowSelection={{
type: 'checkbox',
onChange: onChange
}}
columns={columns}
dataSource={data}
/>;
```
在这个示例中,我们通过 `colSpan` 和 `rowSpan` 来实现了单元格的合并。注意,由于合并单元格后表格结构变得复杂,需要通过 `render` 方法来渲染单元格内容。同时,多选框的处理与普通表格一样,通过 `rowSelection` 属性来实现。