antd Table合并行 rowSpan

效果图：

image.png

  data() {
    return {
      topicsOptions,
      recordData: [],
      loading: false,
      checkedColumns: 1,
      columns: [
        {
          title: "功能",
          ellipsis: true,
          customRender: (text, row) => {
            if (text != '') {
              const obj = {
                children: this.topicsOptions[text.topicType],
                attrs: {},
              };
              obj.attrs.rowSpan = mergeCells(row.topicType, this.recordData, 'topicType');
              return obj;
            }
          },
        },
        {
          title: "马达名称",
          ellipsis: true,
          customRender: (text, row) => {
            if (text != '') {
              const obj = {
                children: text.name,
                attrs: {},
              };
              obj.attrs.rowSpan = mergeCells(row.name, this.recordData, 'name');
              return obj;
            }
          },
        },
        {dataIndex: "dataTopic", title: "Topic", ellipsis: true},
        {dataIndex: "direction", title: "数据方向", ellipsis: true},
        {dataIndex: "des", title: "描述", ellipsis: true},
      ]
    }
  },

recordData:
[{"topicType":0,"dataTopic":"V2/geek/mark_cl/mark_1001/heartbeat","des":"网关心跳上报通道","direction":"上行"},{"topicType":1,"dataTopic":"V2/geek/mark_cl/mark_1001/gateway_info_on","des":"设备固件版本信息上行","direction":"上行"},{"topicType":1,"dataTopic":"V2/geek/mark_cl/mark_1001/gateway_info_down","des":"获取设备固件版本信息下行","direction":"下行"},{"topicType":1,"dataTopic":"V2/geek/mark_cl/mark_1001/upgrade_on","des":"设备上报固件升级信息","direction":"上行"},{"topicType":1,"dataTopic":"V2/geek/mark_cl/mark_1001/upgrade_down","des":"固件升级信息下行","direction":"下行"},{"topicType":1,"dataTopic":"V2/geek/mark_cl/mark_1001/upgrade_percent","des":"设备上报固件升级进度","direction":"上行"},{"topicType":1,"dataTopic":"V2/geek/mark_cl/mark_1001/upgrade_pull","des":"设备主动拉取固件升级信息","direction":"上行"},{"topicType":2,"dataTopic":"V2/geek/mark_cl/mark_1001/ntp_on","des":"NTP 时钟同步请求","direction":"上行"},{"topicType":2,"dataTopic":"V2/geek/mark_cl/mark_1001/ntp_down","des":"NTP 时钟同步响应","direction":"下行"}]

const temp = {} // 当前重复的值,支持多列
const mergeCells = (text, array, columns) => {
  let i = 0;
  let isContinuous = false;// 判断是否连续
  if (text !== temp[columns]) {
    temp[columns] = text
      for(let j = 0; j< array.length;j++) {
        let item = array[j]
        if (item[columns] === temp[columns]) {
          i += 1
          isContinuous = true
        } else {
          if (isContinuous) break
        }
      }
    }
  return i
}



// const temp = {} // 当前重复的值,支持多列
// 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[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
// }

参考链接
Antd Table表格动态合并单元格(更新)
https://blog.csdn.net/weixin_46554760/article/details/119749790