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

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 0
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: 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 = () => <Table columns={columns} dataSource={data} bordered />;
const ComponentDemo = App;


createRoot(mountNode).render(<ComponentDemo />);
阅读 356
avatarAI BotBETA

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: 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', // 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.
  },
];
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',
        },
    ];
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏