VberAdminPlusV3/UI/VAP_V3.VUE/docs/auto-row-merge.md

VbTable 自动行合并功能

概述

自动行合并功能允许表格组件根据数据内容自动计算并应用行合并，无需手动在数据中添加 _rowSpan 字段。

使用方法

基本用法

<VbTable
  :columns="columns"
  :data="data"
  :auto-row-merge="true"
  :auto-row-merge-fields="['department']"
/>

多层级合并

<VbTable
  :columns="columns"
  :data="data"
  :auto-row-merge="true"
  :auto-row-merge-fields="['region', 'city', 'store']"
/>

Props 配置

autoRowMerge

• 类型: boolean
• 默认值: false
• 说明: 是否启用自动行合并功能

autoRowMergeFields

• 类型: string[]
• 默认值: []
• 说明: 需要进行自动合并的字段列表，字段顺序决定层级关系

工作原理

1. 数据拷贝: 组件会深拷贝原始数据，避免修改原始数据源
2. 分组计算: 根据指定的字段列表，逐行比较相邻数据的字段值
3. 层级判断: 对于多层级合并，会检查所有上级字段是否相同
4. 自动设置: 自动计算并设置 _rowSpan 值（使用 rowSpanSuffix 配置的后缀）

示例

示例 1: 单字段合并

const columns = [
  { name: "部门", field: "department" },
  { name: "姓名", field: "name" },
  { name: "职位", field: "position" }
]

const data = [
  { department: "技术部", name: "张三", position: "工程师" },
  { department: "技术部", name: "李四", position: "工程师" },
  { department: "产品部", name: "王五", position: "产品经理" }
]

使用 :auto-row-merge-fields="['department']" 后，相同部门的行会自动合并。

示例 2: 多层级合并

const columns = [
  { name: "区域", field: "region" },
  { name: "城市", field: "city" },
  { name: "门店", field: "store" },
  { name: "商品", field: "product" }
]

const data = [
  { region: "华东", city: "上海", store: "门店A", product: "商品1" },
  { region: "华东", city: "上海", store: "门店A", product: "商品2" },
  { region: "华东", city: "南京", store: "门店B", product: "商品1" }
]

使用 :auto-row-merge-fields="['region', 'city', 'store']" 后：

• 相同区域的行会合并
• 在同一区域内，相同城市的行会合并
• 在同一城市内，相同门店的行会合并

优势

1. 简化代码: 无需手动计算和设置 rowSpan 值
2. 自动同步: 数据变化时自动重新计算合并关系
3. 易于维护: 只需关注数据本身，不需要处理合并逻辑
4. 支持层级: 天然支持多层级的合并场景

注意事项

1. 性能考虑: 自动合并会深拷贝数据，大数据量时可能影响性能
2. 覆盖行为: 如果数据中已存在手动设置的 rowSpan，自动合并会覆盖它
3. 字段顺序: 多层级合并时，字段顺序很重要，前面的字段是后面字段的父级
4. 数据类型: 确保用于合并的字段值可以进行相等比较

与手动合并的对比

特性	手动合并	自动合并
代码复杂度	高（需要计算逻辑）	低（只需配置）
数据修改	需要修改原始数据	不修改原始数据
维护成本	高	低
灵活性	高（可精确控制）	中（基于规则）
适用场景	复杂合并逻辑	常规分组合并

最佳实践

1. 简单场景: 优先使用自动合并，代码更简洁
2. 复杂场景: 如果需要特殊的合并逻辑，可以结合手动和自动合并
3. 大数据量: 考虑在服务端预处理数据，或禁用自动合并
4. 动态数据: 自动合并特别适合数据频繁变化的场景