# VbTable 自动行合并功能

## 概述

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

## 使用方法

### 基本用法

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

### 多层级合并

```vue
<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: 单字段合并

```javascript
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: 多层级合并

```javascript
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. **动态数据**: 自动合并特别适合数据频繁变化的场景