使用element-plus表格合并

可以使用element-plus的在线编辑查看效果

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="week" label="ID" width="180" />
      <el-table-column prop="startTime" label="Name" />
      <el-table-column prop="endTime" sortable label="Amount 1" />
      <el-table-column prop="status" sortable label="Amount 2" />
      <el-table-column prop="doorStatus" sortable label="Amount 3" /><el-table-column prop="week" label="ID" width="180" />
      <el-table-column prop="startTime" label="Name" />
      <el-table-column prop="endTime" sortable label="Amount 1" />
      <el-table-column prop="status" sortable label="Amount 2" />
      <el-table-column prop="doorStatus" sortable label="Amount 3" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import type { TableColumnCtx } from 'element-plus'

interface SpanMethodProps {
  row: User
  column: TableColumnCtx<User>
  rowIndex: number
  columnIndex: number
}

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps, ) => {
  if (columnIndex === 0) {
      const r = compareSingleAttrReturnColSpan(row, 'week', rowIndex, tableData);
      return r;
  }
  if (columnIndex === 1) {
      const r = compareSingleAttrReturnColSpan(row, 'startTime', rowIndex, tableData);
      return r;
  }
}

const tableData: any[] = [
  {
          "week": "1", //周一
          "doorStatus": "2", //门状态模式（梯控模式），0-普通状态，2-常开状态（自由），3-常闭状态（禁用）
          "startTime": "8:15:00", //开始时间
          "endTime": "18:30:00", //结束时间
          "status": "1" //是否开启，1-开启，0-关闭
  },
  {
          "week": "1",
          "doorStatus": "3",
          "startTime": "8:15:00",
          "endTime": "14:41:00",
          "status": "1"
  },
  {
          "week": "1",
          "doorStatus": "2",
          "startTime": "14:41:00",
          "endTime": "14:49:00",
          "status": "1"
  },
  {
          "week": "2",
          "doorStatus": "2",
          "startTime": "8:15:00",
          "endTime": "14:39:00",
          "status": "1"
  },
  {
          "week": "2",
          "doorStatus": "3",
          "startTime": "14:39:00",
          "endTime": "14:41:00",
          "status": "1"
  },
  {
          "week": "2",
          "doorStatus": "2",
          "startTime": "14:41:00",
          "endTime": "14:49:00",
          "status": "1"
  }]
  // 处理合并
  const compareSingleAttrReturnColSpan=(row, compareAttr, index, tableData)=> {
  console.log('index',index)
    let count = 0;
    let start = index;
    let multCompare = true;

    while (start < tableData.length && multCompare) {
      start++;
      count++;
      multCompare = row[compareAttr] === tableData[start]?.[compareAttr];//依旧符合相等条件
    }
    start--;//退出循环后的 新起始行 index
    console.log(start, count)
    if (start < tableData.length) {
      tableData[index][`${compareAttr}_count`] = count;//将合并的行数存储在行数据中的一个特定属性中
    }

    if (index > 0 && count + 1 === tableData[index - 1][`${compareAttr}_count`]) {
      return [0, 0];//不需要合并
    }
    return [count, 1];
  }
</script>