一、多列依据指定条件行合并
例图：(依据序号将发生时间进行行合并)
import React, {useState } from 'react'import {Table, Card } from 'antd'function TableMergeCells() {const data = [{id: 1,tone_name: '123',time: '-02-03'}, {id: 1,tone_name: '123',time: '-02-03'}, {id: 1,tone_name: '123',time: '-02-03'}, {id: 1,tone_name: '123',time: '-02-03'}, {id: 2,tone_name: '123111',time: '-02-04'}, {id: 2,tone_name: '123111',time: '-02-04'},];const [tableData, setTableData] = useState(data);// 获取动态数据（目前是静态）const columns = [{key: '6',title: '序号',dataIndex: 'id',render: (value, record) => tableMergeCellsRender(value, record, 'id')},{key: '1',title: '发生时间',dataIndex: 'time',render: (value, record) => tableMergeCellsRender(value, record, 'time')},{key: '2',title: '事件ID',dataIndex: 'eventID'},{key: '3',title: '车牌号',dataIndex: 'carNum'},];// function tableMergeCellsRender(value, record, columns) {const obj = {children: value,props: {},}obj.props.rowSpan = mergeCells(record.id, tableData, columns);// 第一个参数传入指定条件的数据，用于比较return obj}const temp = {} // 当前重复的值,支持多列/*** 动态合并表格方法(依据某一条件合并)* @param {*} text 表格每列对应的值* @param {*} data 后台返回的展示数据数组, 数据需要按字段排序* @param {*} columns 表格每列表头字段*/function mergeCells(text, data, columns) {let i = 0;let isContinuous = false;// 判断是否连续// 判断text值与上一次保存的值是否相等if (text !== temp[columns]) {temp[columns] = text;try {data.forEach((item) => {if (item.id === temp[columns]) {i += 1;isContinuous = true;// 数据连续时，i一直累加} else {// 当isContinuous为真时，证明已经断续了，报错一个错误跳出循环，这样将不会遍历断续后的相同的数据（导致表格变形）if (isContinuous) throw new Error("finish");}});} catch (e) {console.log("断续跳出");}}// 如果这次的值与上次的值相等，返回i，并且i = 0。return i}return (<Card><Tableborderedcolumns={columns}dataSource={tableData}/></Card>);}export default TableMergeCells
二、多列依据自身条件行合并
例图：(根据自身条件数据进行行合并)
import React, {useState } from 'react'import {Table, Card } from 'antd'function TableMergeCells() {const data = [{id: 1,tone_name: '123',time: '-02-03'}, {id: 1,tone_name: '123',time: '-02-03'}, {id: 1,tone_name: '123',time: '-02-03'}, {id: 1,tone_name: '123',time: '-02-03'}, {id: 2,tone_name: '123111',time: '-02-04'}, {id: 2,tone_name: '123111',time: '-02-04'},];const [tableData, setTableData] = useState(data);// 获取动态数据（目前是静态）const columns = [{key: '6',title: '序号',dataIndex: 'id',render: (value, record) => tableMergeCellsRender(value, 'id')},{key: '1',title: '发生时间',dataIndex: 'time',render: (value, record) => tableMergeCellsRender(value, 'time')},{key: '2',title: '事件ID',dataIndex: 'eventID'},{key: '3',title: '车牌号',dataIndex: 'carNum'},];// function tableMergeCellsRender(value, columns) {const obj = {children: value,props: {},}obj.props.rowSpan = mergeCells(value, tableData, columns); // 第一个参数传入当前数据本身，用于比较return obj}const temp = {} // 当前重复的值,支持多列/*** 动态合并表格方法(依据某一条件合并)* @param {*} text 表格每列对应的值* @param {*} data 后台返回的展示数据数组, 数据需要按字段排序* @param {*} columns 表格每列表头字段*/function mergeCells(text, data, columns) {let i = 0;let isContinuous = false;// 判断是否连续// 判断text值与上一次保存的值是否相等if (text !== temp[columns]) {temp[columns] = text;try {data.forEach((item) => {// 判断数据中的值与当前的值是否相等，如果相等则加1。当前判断条件是同一属性if (item[columns] === temp[columns]) {i += 1;isContinuous = true;// 数据连续时，i一直累加} else {// 当isContinuous为真时，证明已经断续了，报错一个错误跳出循环，这样将不会遍历断续后的相同的数据（导致表格变形）if (isContinuous) throw new Error("finish");}});} catch (e) {console.log("断续跳出");}// 如果这次的值与上次的值相等，返回i，并且i = 0。return i}return (<Card><Tableborderedcolumns={columns}dataSource={tableData}/></Card>);}export default TableMergeCells
