antd Table能实现跨列跨行合并成一个单元格吗?-灵析社区

庆广大

antd Table可以实现跨列跨行同时合并吗? 比如下图,我想将框住的内容合并一个单元格,合并后希望可以自定义一段内容 居中展示,目前我试了下可以列或行合并,同时合并的话,该怎么实现呢 ![](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241012/4f9c79716e46afe6e533b5f92baa282b.png) 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 0 const columns = [ { title: 'Name', dataIndex: 'name', render: (text) => {text}, }, { 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: 18889898989, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', tel: '0571-22098333', phone: 18889898888, age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, tel: '0575-22098909', phone: 18900010002, address: 'Sidney No. 1 Lake Park', }, { key: '4', name: 'Jim Red', age: 18, tel: '0575-22098909', phone: 18900010002, address: 'London No. 2 Lake Park', }, { key: '5', name: 'Jake White', age: 18, tel: '0575-22098909', phone: 18900010002, address: 'Dublin No. 2 Lake Park', }, ]; const App = () => ; const ComponentDemo = App; createRoot(mountNode).render();

阅读量:186

点赞量:0

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