Vue3中使用ag-grid如何实现单列单元格合并？

以下为Vue 3框架下使用ag-grid的基础示例代码：

<script setup lang="ts">
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
import { AgGridVue } from "ag-grid-vue3";
import { ref } from "vue";

const columnDefs = ref([
  {
    field: "person",
  },
  {
    field: "car",
  },
]);

const rowData = ref([
  { person: "person-1", car: "car-1" },
  { person: "person-1", car: "car-2" },
  { person: "person-1", car: "car-3" },
  { person: "person-2", car: "car-4" },
  { person: "person-3", car: "car-5" },
  { person: "person-3", car: "car-6" },
]);
</script>

<template>
  <ag-grid-vue
    style="width: 500px; height: 500px"
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    :rowData="rowData"
  >
  </ag-grid-vue>
</template>

运行上述代码得到的初始表格效果：

基于person字段做整行分组是折叠展开的交互，要实现单列内相同内容单元格纵向合并的效果，预期效果如下：

直接调用官方row-spanning接口无法直接完成动态同值合并，可按以下方案实现： #

实现步骤 #

核心逻辑是先预处理数据，统计每列连续相同值的跨行数，配合rowSpan配置和自定义样式完成合并，不需要引入额外插件。

• 编写数据预处理函数
  遍历原始行数据，针对需要合并的字段，统计连续相同值的跨度，给每行添加对应的跨度标记：连续区间非首行的跨度设为0（不渲染单元格），首行跨度设为连续相同值的总行数。

/**
 * 生成单元格合并所需的跨度字段
 * @param data 原始表格数据
 * @param targetField 需要合并同值单元格的字段名
 */
const processRowSpanData = (data: any[], targetField: string) => {
  if (!data.length) return [];
  const processedData = JSON.parse(JSON.stringify(data));
  let spanCount = 1;
  // 倒序遍历计算跨度逻辑更简洁
  for (let i = processedData.length - 1; i >= 0; i--) {
    const currentValue = processedData[i][targetField];
    const nextRowValue = i < processedData.length - 1 ? processedData[i+1][targetField] : null;
    if (currentValue === nextRowValue) {
      spanCount++;
      processedData[i][`${targetField}Span`] = 0;
    } else {
      processedData[i][`${targetField}Span`] = spanCount;
      spanCount = 1;
    }
  }
  return processedData;
};

// 处理原始数据后再赋值给表格
const originData = [
  { person: "person-1", car: "car-1" },
  { person: "person-1", car: "car-2" },
  { person: "person-1", car: "car-3" },
  { person: "person-2", car: "car-4" },
  { person: "person-3", car: "car-5" },
  { person: "person-3", car: "car-6" },
];
const rowData = ref(processRowSpanData(originData, "person"));

• 修改列配置，添加rowSpan规则和单元格样式类
  给需要合并的列配置rowSpan回调，返回预处理好的跨度值，同时给非首行的单元格添加隐藏样式类：

const columnDefs = ref([
  {
    field: "person",
    // 读取预处理好的跨行数
    rowSpan: (params) => params.data.personSpan,
    // 给不同状态的单元格加对应样式
    cellClass: (params) => {
      return params.data.personSpan === 0 ? "span-cell-hidden" : "span-cell-center";
    }
  },
  {
    field: "car",
  },
]);

• 添加自定义样式（不要加scoped作用域）
  隐藏非首行的多余单元格，调整合并后单元格的内容对齐方式，去掉重复边框：

/* 隐藏被合并的冗余单元格 */
.span-cell-hidden {
  visibility: hidden;
  border-top: none !important;
}
/* 合并后的单元格内容垂直水平居中 */
.span-cell-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

扩展说明 #

• 如果需要支持排序、筛选后自动重新合并，只要监听表格的sortChanged、filterChanged事件，事件触发后重新获取当前渲染的行数据，执行预处理函数更新rowData即可
• 多列需要分别合并时，给每个目标字段单独执行预处理生成对应的Span字段，给对应列配置相同的rowSpan和样式规则即可
• 该方案兼容ag-grid社区版，不需要购买企业版功能

内容的提问来源于stack exchange，提问作者user19025657