近期在处理数据报表项目过程中频繁面临表格合并的挑战。产品经理希望能将表格中重复内容并合至同一行显示。尽管通过查阅众多博文了解相关方法与实践，但实际操作却无法解决相关问题。例如，提及ant design版本不适配或添加相关代码仍未成功；更为糟糕的是，即使成功合并，数据仍然仅可水平居中，无法实现垂直居中。作为技术支持者，必须满足产品需求，力求保持99%的原型匹配度。虽然工作压力较大，但我坚信这些困难并非无法克服。所以，我也将这些经验分享出来，供大家共同探讨学习。

一、开发页面、获取表格数据

 在使用ant design组件时需要进行提前安转，这个具体安装步骤在ant design官网中有，不会的小伙伴可以去查看一下，但是版本尽量和vue匹配，不然后续在写代码时就会发现有很多都无法使用的问题。安装完组件后就可以正常使用了，下面是具体详细代码：

（1）<template>部分

<template>
  <!-- 表格部分 -->
  <div class="content">
    <div class="table-body">
      <a-table
        :columns="columns"
        :dataSource="tableData"
        :pagination="false"
        bordered
        :scroll="{ y: 'calc(100vh - 520px)' }"
      />
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <a-pagination
        :current="current"
        :size="size"
        :total="pageData.total"
        @change="onChange"
        show-less-items
        show-quick-jumper
        show-size-changer
        :show-total="(total, range) => `共 ${pageData.total || 0} 条`"
      />
    </div>
  </div>
</template>

（2）<script>部分

<script setup>
import { getRoadManageTotal} from '../api/index'
// 分页信息
const pageData = ref({})
// 当前页
const current = ref(1)
// 多少页入参
const size = ref('')
const tableData = ref([])
const columns = ref([
  {
    title: '日期',
    dataIndex: 'tabdate',
    key: 'tabdate',
    align: 'center'
  },
  {
    title: '路线',
    dataIndex: 'tabroad',
    key: 'road',
    align: 'center',
  },
  {
    title: '路段',
    dataIndex: 'tabhighway',
    key: 'highway',
    align: 'center'
  },
  {
    title: '断面流量(万辆)',
    dataIndex: 'tabdmflow',
    key: 'dmflow',
    align: 'center'
  },
  {
    title: '清障统计',
    // dataIndex: 'tabwrecker',
    // key: 'wrecker',
    // align: 'center',
    children: [
      {
        title: '合计(起)',
        dataIndex: 'wreckertotal',
        align: 'center',
        key: 'total',
        width: 100,
        sorter: true
      },
      {
        title: '放空(起)',
        dataIndex: 'wrec