antd table 合并列
时间: 2023-10-29 12:05:37 浏览: 58
antd table 合并列可以通过设置表格的 column 属性中的 render 函数来实现。具体步骤如下:
1. 在 column 中设置需要合并的列的 dataIndex 和 render 函数。
2. 在 render 函数中,判断当前单元格是否需要合并,如果需要,则返回一个包含合并信息的对象,否则返回单元格的值。
3. 在表格的 rowSpan 和 colSpan 属性中设置需要合并的行数和列数。
4. 如果需要在合并后的单元格中显示图片,可以在 render 函数中返回一个包含图片的 JSX 元素。
下面是一个示例代码,用于将表格中的第一列和第二列合并,并在合并后的单元格中显示图片:
```
import { Table } from 'antd';
const dataSource = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
image: 'https://example.com/image1.png',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
image: 'https://example.com/image2.png',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
image: 'https://example.com/image3.png',
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: (text, record, index) => {
const obj = {
children: text,
props: {},
};
if (index === 0) {
obj.props.rowSpan = 2;
}
if (index === 1) {
obj.props.rowSpan = 0;
}
return obj;
},
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
render: (text, record, index) => {
const obj = {
children: text,
props: {},
};
if (index === 0) {
obj.props.rowSpan = 2;
}
if (index === 1) {
obj.props.rowSpan = 0;
}
return obj;
},
},
{
title: 'Address',
dataIndex: 'address',
key: 'address', },
{
title: 'Image',
dataIndex: 'image',
key: 'image',
render: (text, record, index) => {
if (index === 0) {
return <img src={text} alt="image" />;
}
return null;
},
},
];
const DemoTable = () => {
return <Table dataSource={dataSource} columns={columns} />;};
```