Antd table 表格合并单元格后“隔行”变色

效果

预览地址

实现

官方文档合并单元格 ： 3x.ant.design/components/…

源码：

const { Table } = antd;

let rowSpanIndex = 0; //合并单元格大行索引值
let rowSpanCount = 0; //记录每个大行合并单元格行数

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Home phone',
    colSpan: 2,
    dataIndex: 'tel',
    render: (value, row, index) => {
      return {
        children: value,
        props: {
          rowSpan:row.rowSpan
        },
      };
    },
  },
  {
    title: 'Phone',
    colSpan: 0,
    dataIndex: 'phone',
  }
];

//数据源
const data = [
  {
    key: '1',
    name: '张三',
    tel: '0571-22098909',
    phone: 18889898989,
  },
  {
    key: '2',
    name: '李四',
    tel: '0571-22098909',
    phone: 18889898888,
  },
  {
    key: '3',
    name: '王五',
    tel: '0575-22098909',
    phone: 18900010002,
  },
  {
    key: '4',
    name: '赵六',
    tel: '0575-22098909',
    phone: 18900010002,
  },
  {
    key: '5',
    name: '周七',
    tel: '0575-55098909',
    phone: 18900010002,
  },
  {
    key: '6',
    name: '吴八',
    tel: '0575-88098909',
    phone: 18900010002,
  },
];


const  getNewData = (data,field)=>{
    let count = 0;//重复项的第一项
    let indexCount = 1;//下一项
    while (indexCount<data.length){
        var item = data.slice(count,count+1)[0];//获取没有比较的第一个对象
        if(!item.rowSpan){
            item.rowSpan = 1;//初始化为1
        }
        if(item[field] === data[indexCount][field]){//第一个对象与后面的对象相比，有相同项就累加，并且后面相同项设置为0
            item.rowSpan++;
            data[indexCount].rowSpan = 0;
        }else {
            count = indexCount;
        }
        indexCount++;
    }
    return data
}

ReactDOM.render(<Table columns={columns} dataSource={getNewData(data,'tel')} bordered rowClassName={record => {
      let className = '';
      if (record.rowSpan > 0) rowSpanCount = record.rowSpan;
      if (rowSpanIndex % 2 === 1) className = 'darkRow';
      if (record.rowSpan == 0) rowSpanCount--;
      if (rowSpanCount === 1) rowSpanIndex++;
      return className;
    }}/>, mountNode);
复制代码