javascript - antd Table能实现跨列跨行合并成一个单元格吗？

Question

antd Table可以实现跨列跨行同时合并吗？

比如下图，我想将框住的内容合并一个单元格，合并后希望可以自定义一段内容
居中展示，目前我试了下可以列或行合并，同时合并的话，该怎么实现呢

demo代码

const { createRoot } = ReactDOM;const {  Table  } = antd;// In the fifth row, other columns are merged into first column// by setting it's colSpan to be 0const columns = [  {    title: 'Name',    dataIndex: 'name',    render: (text) => <a>{text}</a>,  },  {    title: 'Age',    dataIndex: 'age',  },  {    title: 'Home phone',    dataIndex: 'tel',  },  {    title: 'Phone',    dataIndex: 'phone',  },  {    title: 'Address',    dataIndex: 'address',  },];const data = [  {    key: '1',    name: 'John Brown',    age: 32,    tel: '0571-22098909',    phone: [phone],    address: 'New York No. 1 Lake Park',  },  {    key: '2',    name: 'Jim Green',    tel: '0571-22098333',    phone: [phone],    age: 42,    address: 'London No. 1 Lake Park',  },  {    key: '3',    name: 'Joe Black',    age: 32,    tel: '0575-22098909',    phone: [phone],    address: 'Sidney No. 1 Lake Park',  },  {    key: '4',    name: 'Jim Red',    age: 18,    tel: '0575-22098909',    phone: [phone],    address: 'London No. 2 Lake Park',  },  {    key: '5',    name: 'Jake White',    age: 18,    tel: '0575-22098909',    phone: [phone],    address: 'Dublin No. 2 Lake Park',  },];const App = () => <Table columns={columns} dataSource={data} bordered />;const ComponentDemo = App;createRoot(mountNode).render(<ComponentDemo />);

Answer 1

    const columns = [        {            title: 'Name',            dataIndex: 'name',            render: (text) => <a>{text}</a>,        },        {            title: 'Age/Home phone/Phone',            dataIndex: 'age',            align: 'center', // 居中            render: (text, record) => { // record 获取值拼接                return `${record.age}/${record.tel}/${record.age}`            },        },        {            title: 'Address',            dataIndex: 'address',        },    ];

Answer 2

antd 的 Table 组件确实支持跨列和跨行合并，但并不能同时合并。你需要分开进行列和行的合并。

你的问题中提到你想要合并的框住的内容是一个行和列的交叉区域，这需要先进行行的合并，再进行列的合并。

首先，你需要设置你想要合并的行的 rowSpan 属性。然后，对于这些行中的列，你需要设置 colSpan 属性来合并列。

你的代码中缺少了合并行的部分，所以需要添加对应的逻辑。以下是一个示例：

const columns = [  {    title: 'Name',    dataIndex: 'name',    render: (text) => <a>{text}</a>,  },  {    title: 'Age',    dataIndex: 'age',  },  {    title: 'Home phone',    dataIndex: 'tel',  },  {    title: 'Phone',    dataIndex: 'phone',  },  {    title: 'Address',    dataIndex: 'address',  },];const data = [  {    key: '1',    name: 'John Brown',    age: 32,    tel: '0571-22098909',    phone: [phone],    address: 'New York No. 1 Lake Park',  },  {    key: '2',    name: 'Jim Green',    tel: '0571-22098333',    phone: [phone],    age: 42,    address: 'London No. 1 Lake Park',  },  {    key: '3',    name: 'Joe Black',    age: 32,    tel: '0575-22098909',    phone: [phone],    address: 'Sidney No. 1 Lake Park',  },  {    key: '4', // This row will be merged into the row above it.    name: '', // This field will be merged into the Name field above it.    age: '', // This field will be merged into the Age field above it.    tel: '', // This field will be merged into the Home phone field above it.    phone: '', // This field will be merged into the Phone field above it.    address: '', // This field will be merged into the Address field above it.  },  {    key: '5', // This row will be merged into the row above it.    name: 'Jake White', // This field will be merged into the Name field above it.    age: 18, // This field will be merged into the Age field above it.    tel: '', // This field will be merged into the Home phone field above it.    phone: '', // This field will be merged into the Phone field above it.    address: '', // This field will be merged into the Address field above it.  },];