如何根据表格内容来合并单元格...

• 需求：判断第三列型号名称是否相同，如果相同则合并，第四、五、六、七列也跟随合并同样的行数。
• 前提：这里我举例说明，第三列是大众一号，那么第四列一定是上汽大众，第五列一定是履带拖拉机... 这个前提下可以使用该方法
• 实现：

1. element plus组件库实现表格

<el-table :data="data" style="width: 100%;" :span-method="ObjectSpanMethod" border
      :header-cell-style="{ backgroundColor: '#FAFAFC', height: '70px' }">
      <el-table-column prop="serialNumber" label="序号" width="60" align="center" />
      <el-table-column prop="protoNumber" label="样机编号" align="center" />
      <el-table-column prop="modelName" label="型号名称" align="center" />
      <el-table-column prop="manufacturerName" label="厂商名称" align="center" />
      <el-table-column prop="modelType" label="样机类型" align="center" />
      <el-table-column prop="contact" label="厂商联系人" align="center" />
      <el-table-column prop="ratedPower" label="标定功率(KW)" align="center" width="120" />
      <el-table-column prop="simNo" label="设备号" align="center" />
      <el-table-column prop="protoLocation" label="样机位置" align="center" />
      <el-table-column prop="deliveryTime" label="送达时间" align="center" />
      <el-table-column prop="trialTime" label="试验时间" align="center" />
      <el-table-column prop="returnTime" label="归还时间" align="center" />
      <el-table-column prop="protoStatus" label="样机状态" align="center" />
      <el-table-column prop="trialProgress" label="试验进度" align="center" />
      <el-table-column label="操作" width="170" align="center">
        <template #default="scope">
          <div class="button-group">
            <el-button link type="primary" size="small" @click="compile(scope.row)" :disabled="scope.row.protoStatus === '试验中'
              || scope.row.protoStatus === '试验完'
              || scope.row.protoStatus === '已终止'
              || scope.row.protoStatus === '已归还'">编辑</el-button>
            <el-button link type="primary" size="small" :disabled="scope.row.protoStatus === '试验中'
              || scope.row.protoStatus === '试验完'
              || scope.row.protoStatus === '已终止'
              || scope.row.protoStatus === '已归还'" @click="toDelete(scope.row)">删除</el-button>

            <el-dropdown size="small">
              <span class="more">更多</span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="toTestView(scope.row)">查看试验</el-dropdown-item>
                  <el-dropdown-item @click="changeModel(scope.row)">更换设备</el-dropdown-item>
                  <el-dropdown-item @click="returnPro(scope.row)">归还样机</el-dropdown-item>
                  <el-dropdown-item @click="unbundle(scope.row)">解绑设备</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>

        </template>
      </el-table-column>
    </el-table>

2. 合并单元格方法

// 表体
let data: any = ref([])

// 合并单元格
const getSpanArr = () => {
  const mergeArr: Array<Object> = [];
  // 声明并初始化 currentRow 为 data.value[0]
  let currentRow = data.value[0]
  currentRow.rowspan = 1
  mergeArr.push(currentRow)
  // 循环遍历 data.value 数组，从索引 1 开始
  for (let i = 1; i < data.value.length; i++) {
    // 如果 data.value[i] 的 modelName 与 currentRow 的 modelName 不相等
    if (data.value[i].modelName !== currentRow.modelName) {
      // 设置 data.value[i] 的 rowspan 为 1
      data.value[i].rowspan = 1
      // 将 data.value[i] 赋值给 currentRow
      currentRow = data.value[i]
    } else {
      // 若相等，则将 currentRow 的 rowspan 加一
      currentRow.rowspan++
      // 将 data.value[i] 的 rowspan 设置为 0
      data.value[i].rowspan = 0
    }
    // 将 data.value[i] 添加到 mergeArr 中
    mergeArr.push(data.value[i])
  }
  data.value = mergeArr
}
// 合并单元格相同内容 当前行 row、当前列 column、当前行号 rowIndex、当前列号 columnIndex
const ObjectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // 型号名称列

  if ([2, 3, 4, 5, 6].includes(columnIndex)) {
    return {
      rowspan: row.rowspan,
      colspan: 1,
    };
  }
}

3. 实现效果