Vue3+ElementPlus实现Table表格的行合并（单个及多个）

'# Vue3+ElementPlus实现Table表格的行合并（单个及多个）

一、背景与问题

在复杂的业务场景中，表格数据往往需要通过行合并来提升可读性。例如在财务报表中合并相同分类项，或在库存管理中合并相同仓库的多行数据。ElementPlus的Table组件虽然功能强大，但其本身并未直接支持行合并功能，需要开发者通过自定义逻辑实现。

传统实现方式需要处理以下核心问题：

动态计算每个单元格的行跨度（rowspan）
处理合并后的单元格样式兼容性
保持数据与UI的双向绑定
优化大数据量下的性能表现

二、基本原理

行合并的核心原理是通过计算每个单元格的行数，使用rowspan属性来控制单元格合并。对于多级合并场景，需要构建一个三维的合并矩阵，记录每个单元格的合并范围。

在Vue3中，我们可以通过以下步骤实现：

构建数据结构存储合并信息
使用计算属性动态生成渲染数据
通过v-if和v-show控制显示状态
利用CSS处理合并后的边框和对齐

三、环境准备

npm install element-plus --save
npm install @vueuse/core --save

项目结构建议：

src/
├── components/
│   └── TableMerge.vue
├── utils/
│   └── tableUtils.js
├── views/
│   └── Dashboard.vue
└── App.vue

四、核心实现

1. 单个单元格合并

<template>
  <el-table :data="mergedData" border>
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="score" label="分数" />
  </el-table>
</template>

<script setup>
import { ref, computed } from 'vue'

const rawData = [
  { name: '张三', score: 90 },
  { name: '李四', score: 85 },
  { name: '王五', score: 92 }
]

const mergedData = ref([])
const rowSpanMap = ref({})

const mergeSingle = (data, mergeKey) => {
  const result = []
  let prev = null
  let rowSpan = 1
  
  data.forEach(item => {
    if (item[mergeKey] === prev) {
      rowSpan++
    } else {
      if (prev !== null) {
        const last = result[result.length - 1]
        last.rowSpan = rowSpan
        rowSpan = 1
      }
      prev = item[mergeKey]
      result.push(item)
    }
  })
  
  if (prev !== null) {
    const last = result[result.length - 1]
    last.rowSpan = rowSpan
  }
  
  return result
}

mergedData.value = mergeSingle(rawData, 'name')
</script>

关键代码解释：

rowSpanMap用于存储每个单元格的行跨度
mergeSingle函数通过遍历数据，计算每个字段的合并行数
通过计算属性将原始数据转换为可渲染的格式

2. 多个单元格合并

<template>
  <el-table :data="mergedData" border>
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="score" label="分数" />
    <el-table-column prop="grade" label="等级" />
  </el-table>
</template>

<script setup>
import { ref, computed } from 'vue'

const rawData = [
  { name: '张三', score: 90, grade: 'A' },
  { name: '李四', score: 85, grade: 'B' },
  { name: '王五', score: 92, grade: 'A' }
]

const mergedData = ref([])
const rowSpanMap = ref({})

const mergeMulti = (data, mergeKeys) => {
  const result = []
  const spans = {}
  
  data.forEach(item => {
    const key = mergeKeys.join('-')
    const mergeKey = mergeKeys.map(k => item[k]).join('-')
    
    if (spans[mergeKey]) {
      spans[mergeKey]++
    } else {
      spans[mergeKey] = 1
    }
    
    const last = result[result.length - 1]
    if (last && last[mergeKey] === item[mergeKey]) {
      last.rowSpan = spans[mergeKey]
      spans[mergeKey]++
    } else {
      result.push(item)
    }
  })
  
  return result
}

mergedData.value = mergeMulti(rawData, ['name', 'grade'])
</script>

关键代码解释：

mergeMulti函数支持多个字段的组合合并
通过生成唯一键（如name-grade）来识别合并组
使用spans对象记录每个组的合并行数
通过计算属性将原始数据转换为可渲染的格式

3. 动态合并（按规则计算）

<template>
  <el-table :data="mergedData" border>
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="score" label="分数" />
    <el-table-column prop="grade" label="等级" />
  </el-table>
</template>

<script setup>
import { ref, computed } from 'vue'

const rawData = [
  { name: '张三', score: 90, grade: 'A' },
  { name: '李四', score: 85, grade: 'B' },
  { name: '王五', score: 92, grade: 'A' }
]

const mergedData = ref([])
const rowSpanMap = ref({})

const mergeDynamic = (data, mergeRules) => {
  const result = []
  const spans = {}
  
  data.forEach(item => {
    const mergeKey = mergeRules.map(k => item[k]).join('-')
    
    if (spans[mergeKey]) {
      spans[mergeKey]++
    } else {
      spans[mergeKey] = 1
    }
    
    const last = result[result.length - 1]
    if (last && last[mergeRules[0]] === item[mergeRules[0]]) {
      last.rowSpan = spans[mergeKey]
      spans[mergeKey]++
    } else {
      result.push(item)
    }
  })
  
  return result
}

mergedData.value = mergeDynamic(rawData, ['name', 'grade'])
</script>

关键代码解释：

mergeDynamic函数支持按规则动态合并
通过mergeRules参数控制合并字段
可以根据业务规则灵活配置合并逻辑
支持多级合并和复杂合并条件

五、完整案例

学生成绩统计表案例

<template>
  <div class="table-container">
    <el-table :data="mergedData" border class="custom-table">
      <el-table-column prop="studentId" label="学号" width="120" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="course" label="课程" width="150" />
      <el-table-column prop="score" label="分数" width="100" />
      <el-table-column prop="grade" label="等级" width="100" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 原始数据
const rawData = ref([
  { studentId: '001', name: '张三', course: '数学', score: 90, grade: 'A' },
  { studentId: '002', name: '李四', course: '数学', score: 85, grade: 'B' },
  { studentId: '003', name: '王五', course: '数学', score: 92, grade: 'A' },
  { studentId: '004', name: '赵六', course: '英语', score: 88, grade: 'B' },
  { studentId: '005', name: '张三', course: '英语', score: 95, grade: 'A' },
  { studentId: '006', name: '李四', course: '英语', score: 82, grade: 'B' },
])

// 合并规则
const mergeRules = ref(['course', 'grade'])

// 计算合并数据
const mergedData = computed(() => {
  const result = []
  const spans = {}
  
  rawData.value.forEach(item => {
    const mergeKey = mergeRules.value.map(k => item[k]).join('-')
    
    if (spans[mergeKey]) {
      spans[mergeKey]++
    } else {
      spans[mergeKey] = 1
    }
    
    const last = result[result.length - 1]
    if (last && last[mergeRules.value[0]] === item[mergeRules.value[0]]) {
      last.rowSpan = spans[mergeKey]
      spans[mergeKey]++
    } else {
      result.push(item)
    }
  })
  
  return result
})

// 样式处理
const getStyle = (row) => {
  if (row.rowSpan) {
    return {
      'border-bottom': '1px solid #ccc',
      'border-right': '1px solid #ccc',
      'padding': '0',
      'height': 'auto'
    }
  }
}
</script>

<style scoped>
.custom-table {
  width: 100%;
  border: 1px solid #ebeef4;
  border-radius: 4px;
  overflow: hidden;
}

.custom-table th {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef4;
}

.custom-table td {
  border-bottom: 1px solid #ebeef4;
  border-right: 1px solid #ebeef4;
}
</style>

关键点说明：

使用计算属性动态生成合并数据
通过rowSpan属性控制单元格合并
使用样式处理合并后的边框和对齐
支持多个合并字段的组合规则

六、源码解析

以多字段合并为例，关键逻辑如下：

const mergeMulti = (data, mergeKeys) => {
  const result = []
  const spans = {}
  
  data.forEach(item => {
    // 生成唯一合并键
    const mergeKey = mergeKeys.map(k => item[k]).join('-')
    
    // 计算合并行数
    if (spans[mergeKey]) {
      spans[mergeKey]++
    } else {
      spans[mergeKey] = 1
    }
    
    // 判断是否需要合并
    const last = result[result.length - 1]
    if (last && last[mergeKeys[0]] === item[mergeKeys[0]]) {
      last.rowSpan = spans[mergeKey]
      spans[mergeKey]++
    } else {
      result.push(item)
    }
  })
  
  return result
}

关键点分析：

使用mergeKeys作为合并字段的标识
通过spans对象记录每个合并组的行数
比较当前项与前一项的合并字段值
动态设置rowSpan属性实现合并

七、进阶使用

1. 动态合并规则配置

<template>
  <el-select v-model="mergeField" placeholder="选择合并字段">
    <el-option label="课程" value="course" />
    <el-option label="等级" value="grade" />
  </el-select>
  <el-table :data="mergedData" border>
    <!-- 列定义 -->
  </el-table>
</template>

<script setup>
import { ref, computed } from 'vue'

const mergeField = ref('course')
const mergeRules = computed(() => [mergeField.value])
</script>

2. 表格滚动优化

<template>
  <el-table 
    :data="mergedData" 
    border
    :height="400"
    :scroll-y="true"
    class="custom-table"
  >
    <!-- 列定义 -->
  </el-table>
</template>

3. 响应式布局

<template>
  <el-table 
    :data="mergedData" 
    border
    :class="['custom-table', { 'table-responsive': isMobile }]"
  >
    <!-- 列定义 -->
  </el-table>
</template>

<script setup>
import { ref, computed } from 'vue'

const isMobile = computed(() => window.innerWidth < 768)
</script>

八、性能与工程实践

性能优化策略

虚拟滚动：对于大数据量使用vue-virtual-scroller库
懒加载：仅渲染可视区域内的行
计算缓存：使用computed而非watch
防抖处理：避免频繁数据更新

<template>
  <el-table 
    :data="mergedData" 
    border
    :height="400"
    v-if="!isLoading"
  >
    <!-- 列定义 -->
  </el-table>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const isLoading = ref(true)
const rawData = ref([])

onMounted(() => {
  setTimeout(() => {
    rawData.value = [/* 大量数据 */]
    isLoading.value = false
  }, 500)
})
</script>

安全考虑

数据校验：确保合并字段的值是预期类型
防止注入：避免直接使用用户输入作为合并字段
边界处理：防止空值或异常值导致的错误

九、常见问题与踩坑

常见错误及解决办法

错误现象	原因	解决方案
单元格未合并	忘记设置rowSpan	确保在计算属性中设置rowSpan
合并字段错位	合并字段不一致	检查合并字段的值是否相同
样式错乱	缺少CSS样式	补充必要的边框和padding样式
数据更新失效	未使用计算属性	使用computed或watch处理数据变化
性能下降	大数据量处理	使用虚拟滚动或分页

常见问题分析

合并字段类型不一致：如字符串与数字比较时需要类型转换
合并字段包含特殊字符：需要进行转义处理
动态合并字段未更新：确保使用响应式数据

十、最佳实践

应用场景

适用场景：

数据有明显的合并规律（如相同分类项）
需要突出显示关键信息
需要简化复杂数据的展示形式

不适用场景：

数据频繁更新
需要复杂交互（如拖拽、编辑）
需要动态合并条件（需结合其他逻辑）

十一、总结

通过本文的深入探讨，我们了解到在Vue3中实现ElementPlus表格行合并的核心原理和实现方法。关键点包括：

理解行合并的实现机制
掌握不同合并场景的实现方法
熟悉性能优化策略
避免常见错误和陷阱

在实际开发中，应当根据具体业务需求选择合适的实现方案。对于需要频繁更新的数据，建议使用虚拟滚动技术；对于复杂合并逻辑，可以结合状态管理工具进行优化。通过合理的设计和实现，我们可以有效地提升表格展示的可读性和用户体验。

本文提供的完整案例和代码示例，可以直接应用到实际项目中，帮助开发者快速实现行合并功能。同时，通过深入分析和实践，可以更好地理解和掌握这一技术的精髓。

Vue3+ElementPlus实现Table表格的行合并（单个及多个）

一、背景与问题

二、基本原理

三、环境准备

四、核心实现

1. 单个单元格合并

2. 多个单元格合并

3. 动态合并（按规则计算）

五、完整案例

学生成绩统计表案例

六、源码解析

七、进阶使用

1. 动态合并规则配置

2. 表格滚动优化

3. 响应式布局

八、性能与工程实践

性能优化策略

安全考虑

九、常见问题与踩坑

常见错误及解决办法

常见问题分析

十、最佳实践

推荐方案

应用场景

十一、总结

评论已关闭

推荐阅读