antd table 合并行或者列

所有的渲染相关的操作，都写在 columns里面 render中

render: (value, row, index) =>({
        children: value,  // 页面显示的组建，如<a></a> ,input
        props: {},  // 行列合并在这里的 cloSpan和 rowSpan
}),

官网案例https://codesandbox.io/s/21mx3pm5x0

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table } from 'antd';


const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    props: {},
  };
  if (index === 4) {
    obj.props.colSpan = 0;
  }
  return obj;
};

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text, row, index) => {
      if (index < 4) {
        return <a href="javascript:;">{text}</a>;
      }
      return {
        children: <a href="javascript:;">{text}</a>,
        props: {
          colSpan: 5,
        },
      };
    },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    render: renderContent,
  },
  {
    title: 'Home phone',
    colSpan: 2,
    dataIndex: 'tel',
    render: (value, row, index) => {
      const obj = {
        children: value,
        props: {},
      };
      if (index === 2) {
        obj.props.rowSpan = 2;
      }
      // These two are merged into above cell
      if (index === 3) {
        obj.props.rowSpan = 0;
      }
      if (index === 4) {
        obj.props.colSpan = 0;
      }
      return obj;
    },
  },
  {
    title: 'Phone',
    colSpan: 0,
    dataIndex: 'phone',
    render: renderContent,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    render: renderContent,
  },
];

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',
  },
];

ReactDOM.render(<Table columns={columns} dataSource={data} bordered />, document.getElementById('container'));

官网table行列合并

实际案例

const mergeCells = (text, array, columns) => {
      const temp = {}; // 当前重复的值,支持多列
      let i = 0;
      if (text !== temp[columns]) {
        temp[columns] = text;
        
        array.forEach((item) => {
          if (item[columns] === temp[columns]) {
            i += 1;
          }
        });
      }
      return i;
    };

rowSpan就是渲染的行数，默认为1，设置0则不渲染,案例中 商品ID为222 的rowSpan是3

// dataSource表格数据
const dataSource = [
        { key: 1, goodsId: 222,seckillId: '123' },
        {key: 2, goodsId: 222, seckillId: 'ddaf'},
        {key: 3, goodsId: 222, seckillId: 'ddaf'},
        {key: 4, goodsId: 3, seckillId: 'ddaf'},
        {key: 5, goodsId: 252, seckillId: 'ddaf'},
        {key: 6, goodsId: 33, seckillId: 'ddaf'},
        {key: 7, goodsId: 33, seckillId: 'ddaf'},
        {key: 8, goodsId: 5, seckillId: 'ddaf'},
      ]

const columns = [
      {
        title: '秒杀ID',
        dataIndex: 'seckillId',
        key: 'seckillId',
      },
      {
        title: '商品ID',
        dataIndex: 'goodsId',
        key: 'goodsId',
        render: (text, record, index) => {
          const obj = {
            children: text,
            props: {},
          };

          // 如果上面有相同的数据，如商品ID 222, 则rowSpan = 0
          if ((index > 0 && text !== dataSource[index - 1].goodsId) || index == 0) {
            obj.props.rowSpan = mergeCells(record.goodsId, dataSource, 'goodsId')   
        } else {
            obj.props.rowSpan = 0;
        }

          return obj;
        },
      }]

<Table
   bordered
   pagination={pagination}
   locale={{ emptyText: '暂无数据' }}
   dataSource={dataSource}
   columns={columns.map(v => Object.assign({}, v, { align: 'center' }))}
   size='middle'
  />

亲测，代码copy即可使用