React&antd表格合并列

合并表格中连续的相同的列

// antd表格合并列
/*
key: 键值
row：当前行
index：当前行索引
listData：表格全部数据
reactDom：要渲染的jsx
*/
export const rowSpanTable = (key, row, index, listData, reactDom) => {
  let rowSpan = 1
  let arrIndex = 0
  listData.forEach((item, Dindex) => {
    if (item.id === row.id) {
      arrIndex = Dindex
    }
  })
  if (index === 0) {
    listData.forEach((item, Dindex) => {
      if (Dindex > arrIndex && item[key] === row[key]) {
        rowSpan += 1
      }
    })
  } else if (listData[arrIndex][key] === listData[arrIndex - 1][key]) {
    rowSpan = 0
  } else {
    listData.forEach((item, Dindex) => {
      if (Dindex > arrIndex && item[key] === row[key]) {
        rowSpan += 1
      }
    })
  }
  return {
    children: reactDom,
    props: {
      rowSpan
    }
  }
}

使用时

// 引入
import { rowSpanTable } from '../../utils/utils'

// 表格中每一列 render 函数中直接使用
<Table
	dataSource={this.props.labelList.tagList}
	rowKey={row => row.id}
	pagination={{
		position: 'bottom',
		pageSize: this.state.listData.pageSize,
		current: this.state.listData.pageNo,
		total: this.props.labelList.totalCount,
		onChange: this.pageChange
	}}
	>
	<Column
		title="标签位置"
		align="center"
		dataIndex="sort"
		render={(sort, row, index) => rowSpanTable('sort', row, index, this.props.labelList.tagList, (
			<span>{sort}</span>
		))}
	/>
</Table>

因为之前一直写vue所以习惯使用jsx方式使用表格，和普通方式一样，都在render函数中直接写方法
页面效果