Ant Design Vue 的表格数据，第一列项目区域，项目区域相同的行数据，第一列项目区域合并

在 Ant Design Vue 的表格中，如果需要根据第一列（如“项目区域”）的值进行动态合并，可以通过 customCell 方法实现。以下是完整的代码示例，展示如何根据“项目区域”相同的行数据，合并第一列单元格。

---

代码示例

<template><a-table :columns="columns" :data-source="data" :pagination="false" bordered><!-- 自定义单元格 --><template slot="region" slot-scope="text, record, index"><span>{{ text }}</span></template></a-table>
</template><script>
export default {data() {return {// 数据源data: [{ key: "1", region: "华东区", project: "项目A", manager: "张三" },{ key: "2", region: "华东区", project: "项目B", manager: "李四" },{ key: "3", region: "华南区", project: "项目C", manager: "王五" },{ key: "4", region: "华南区", project: "项目D", manager: "赵六" },{ key: "5", region: "华北区", project: "项目E", manager: "孙七" },],// 表格列配置columns: [{title: "项目区域",dataIndex: "region",key: "region",scopedSlots: { customRender: "region" },customCell: (record, rowIndex) => {const currentRegion = record.region;const nextRegion = this.data[rowIndex + 1]?.region;// 如果当前行与下一行的区域相同，则跳过（rowSpan: 0）if (currentRegion === nextRegion) {return {rowSpan: 0,};}// 计算当前区域连续的行数let rowSpan = 1;for (let i = rowIndex + 1; i < this.data.length; i++) {if (this.data[i].region === currentRegion) {rowSpan++;} else {break;}}return {rowSpan: rowSpan,};},},{title: "项目名称",dataIndex: "project",key: "project",},{title: "负责人",dataIndex: "manager",key: "manager",},],};},
};
</script><style scoped>
/* 可以根据需要添加样式 */
</style>

---

代码解析

1. 数据源 (data)：

   • 数据源是一个数组，每条数据包含 region（项目区域）、project（项目名称）和 manager（负责人）字段。
   • 示例数据中，“华东区”和“华南区”分别有两行数据，“华北区”只有一行数据。

2. 列配置 (columns)：

   • 第一列（region）使用了 customCell 方法。
   • 在 customCell 中，通过比较当前行与下一行的 region 值，决定是否需要合并：
     • 如果当前行与下一行的 region 相同，则设置 rowSpan: 0，表示跳过该行。
     • 如果不同，则计算当前 region 连续的行数，并设置 rowSpan。

3. 模板部分 (template)：

   • 使用 slot 和 slot-scope 渲染单元格内容。

4. 动态计算 rowSpan：

   • 从当前行开始，向后遍历数据，统计连续相同的 region 数量，作为 rowSpan 的值。

---

运行效果

• 第一列“项目区域”中，相同区域的行会合并为一个单元格。
  • “华东区”合并两行。
  • “华南区”合并两行。
  • “华北区”单独显示一行。
• 其他列（如“项目名称”和“负责人”）保持正常显示。

---

注意事项

1. 数据顺序：

   • 合并逻辑依赖于数据的顺序。如果数据未按区域排序，可能导致合并错误。
   • 确保数据按照“项目区域”排序后再渲染表格。

2. 动态数据处理：

   • 如果数据是动态加载的，可以在加载完成后对数据进行预处理（如排序或分组），然后再渲染表格。

3. 性能优化：

   • 当数据量较大时，遍历数据可能会对性能产生影响，建议对数据进行预处理，减少重复计算。

4. 跨页合并：

   • 如果表格分页，rowSpan 只能在当前页内生效，无法跨页合并。

---

通过上述方法，你可以轻松实现 Ant Design Vue 表格中根据“项目区域”动态合并单元格的功能。如果有其他需求或问题，请随时补充说明！