AntDesign表格组件渲染合并单元格列中的图片问题
在Ant Design表格中，如果在合并单元格的列中出现了图片，可能会引起渲染问题，图片会被重复渲染并覆盖。解决这个问题可以使用Ant Design表格提供的自定义渲染方法，手动渲染单元格中的内容，并避免图片被渲染多次。
示例代码如下：
import { Table } from "antd";
const dataSource = [ { key: "1", name: "John Brown", age: 32, address: "New York No. 1 Lake Park", img: "https://example.com/img.jpg", colSpan: 2, // 合并两列 }, { key: "2", name: "Jim Green", age: 42, address: "London No. 1 Lake Park", img: "https://example.com/img.jpg", colSpan: 0, // 不合并 }, { key: "3", name: "Joe Black", age: 32, address: "Sidney No. 1 Lake Park", img: "https://example.com/img.jpg", colSpan: 0, // 不合并 }, ];
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
},
{
title: "Age",
dataIndex: "age",
key: "age",
},
{
title: "Address",
dataIndex: "address",
key: "address",
},
{
title: "Image",
dataIndex: "img",
key: "img",
render: (text, record) => {
if (record.colSpan === 0) {
return ;
} else {
return {
children:
,
props: {
colSpan: record.colSpan,
},
};
}
},
},
];
function App() { return
export default App;