效果圖：

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: "數(shù)據(jù)方向", ellipsis: true},
        {dataIndex: "des", title: "描述", ellipsis: true},
      ]
    }
  },

recordData:
[{"topicType":0,"dataTopic":"V2/geek/mark_cl/mark_1001/heartbeat","des":"網(wǎng)關(guān)心跳上報通道","direction":"上行"},{"topicType":1,"dataTopic":"V2/geek/mark_cl/mark_1001/gateway_info_on","des":"設(shè)備固件版本信息上行","direction":"上行"},{"topicType":1,"dataTopic":"V2/geek/mark_cl/mark_1001/gateway_info_down","des":"獲取設(shè)備固件版本信息下行","direction":"下行"},{"topicType":1,"dataTopic":"V2/geek/mark_cl/mark_1001/upgrade_on","des":"設(shè)備上報固件升級信息","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":"設(shè)備上報固件升級進度","direction":"上行"},{"topicType":1,"dataTopic":"V2/geek/mark_cl/mark_1001/upgrade_pull","des":"設(shè)備主動拉取固件升級信息","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 時鐘同步響應(yīng)","direction":"下行"}]

const temp = {} // 當前重復(fù)的值,支持多列
const mergeCells = (text, array, columns) => {
  let i = 0;
  let isContinuous = false;// 判斷是否連續(xù)
  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 = {} // 當前重復(fù)的值,支持多列
// function mergeCells(text, data, columns) {
//   let i = 0;
//   let isContinuous = false;// 判斷是否連續(xù)
//   // 判斷text值與上一次保存的值是否相等
//   if (text !== temp[columns]) {
//     temp[columns] = text;
//     try {
//       data.forEach((item) => {
//         if (item[columns] === temp[columns]) {
//           i += 1;
//           isContinuous = true;// 數(shù)據(jù)連續(xù)時，i一直累加
//         } else {
//           // 當isContinuous為真時茄螃，證明已經(jīng)斷續(xù)了缝驳，報錯一個錯誤跳出循環(huán)，這樣將不會遍歷斷續(xù)后的相同的數(shù)據(jù)（導(dǎo)致表格變形）
//           if (isContinuous) throw new Error("finish");
//         }
//       });
//     } catch (e) {
//       console.log("斷續(xù)跳出");
//     }
//   }
//   // 如果這次的值與上次的值相等归苍，返回i用狱，并且i = 0。
//   return i
// }

參考鏈接
Antd Table表格動態(tài)合并單元格(更新)
https://blog.csdn.net/weixin_46554760/article/details/119749790