react表格合并单元格，并附上换色

 

 合并代码：

 注：次方法行不通，换另外的一个

{
  title: '第二列',
  dataIndex: 'name',
  customRender: (text, record, index) => {
    const obj = {
      children: text ,
      props: {}
    }
    obj.props.rowSpan = this.mergeCells(text, this.tableData, 'name', index)
    return obj
  }

　　

/**
  * 单元格合并处理
  * @param text 当前单元格的值
  * @param data 当前分页所有数据
  * @param key 当前列的dataIndex
  * @param index 当前数据所在下标
  * @returns {number} 待合并单元格数量
  */
 mergeCells(text, data, key, index) {
   // 上一行该列数据是否一样
   if (index !== 0 && text === data[index - 1][key]) {
     return 0
   }
   let rowSpan = 1
   // 判断下一行是否相等
   for (let i = index + 1; i < data.length; i++) {
     if (text !== data[i][key]) {
       break
     }
     rowSpan++
   }
   return rowSpan
 }　

 

换色代码：

rowColorName=true

 “ou”和“ji”是两个css类名

 主要是根据每行的列字段来进行合并的，所以突破口就在在这里换颜色