vue3 element-plus 实现 table表格合并单元格和多级表头

'# vue3 element-plus 实现 table表格合并单元格和多级表头

一、背景与问题

在复杂数据展示场景中，传统表格组件往往无法满足业务需求。例如：

销售报表中需要合并同一月份的多个产品数据
财务报表中需要展示多维度的分类信息
项目管理看板中需要合并相同阶段的多个任务

传统表格组件存在的典型问题包括：

无法处理单元格合并
多级表头难以实现
动态生成表头与数据列的对应关系
复杂数据类型的展示需求

element-plus 的 table 组件虽然提供了丰富的功能，但其原生的 <el-table> 并不直接支持单元格合并和多级表头。这就需要我们通过自定义渲染和数据结构处理来实现。

二、基本原理

1. 单元格合并原理

element-plus 的 table 组件通过 rowspan 和 colspan 属性实现单元格合并。其核心原理是：

在 rowspan 属性中定义合并的行数
在 colspan 属性中定义合并的列数
通过自定义渲染函数（render-header/render-cell）控制单元格的显示内容

2. 多级表头原理

多级表头需要构建一个嵌套的表头结构，其核心是：

使用 header-cell 属性定义表头的嵌套结构
通过 get_header 方法生成多级表头的 DOM 结构
使用 header-cell-class-name 控制不同层级表头的样式

三、环境准备

npm install element-plus --save
npm install @element-plus/icons-v2 --save

项目中需要引入以下依赖：

import { ElTable, ElTableColumn } from 'element-plus'
import { defineComponent, ref, reactive } from 'vue'

四、核心实现

1. 单元格合并实现（示例一）

<template>
  <el-table :data="tableData" border>
    <el-table-column
      prop="name"
      label="姓名"
    ></el-table-column>
    <el-table-column
      prop="score"
      label="成绩"
    >
      <template #default="scope">
        <span :style="{ color: scope.row.score > 80 ? 'green' : 'red' }">
          {{ scope.row.score }}
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
const tableData = ref([
  { name: '张三', score: 90 },
  { name: '李四', score: 75 },
  { name: '王五', score: 85 },
])
</script>

2. 多级表头实现（示例二）

<template>
  <el-table :data="tableData" border>
    <el-table-column
      label="基本信息"
      :children="[
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' }
      ]"
    ></el-table-column>
    <el-table-column
      label="成绩"
      :children="[
        { prop: 'score', label: '分数' },
        { prop: 'grade', label: '等级' }
      ]"
    ></el-table-column>
  </el-table>
</template>

<script setup>
const tableData = ref([
  { name: '张三', age: 20, score: 90, grade: 'A' },
  { name: '李四', age: 22, score: 85, grade: 'B' }
])
</script>

3. 单元格合并与多级表头结合（示例三）

<template>
  <el-table :data="tableData" border>
    <el-table-column
      label="学生信息"
      :children="[
        { prop: 'name', label: '姓名', rowspan: 2 },
        { prop: 'age', label: '年龄', rowspan: 2 },
        { prop: 'score', label: '分数', rowspan: 2 }
      ]"
    >
      <template #default="scope">
        <div v-if="scope.rowIndex === 0">
          <span style="color: red;">{{ scope.row.name }}</span>
          <span style="color: blue;">{{ scope.row.age }}</span>
        </div>
        <div v-else>
          <span style="color: green;">{{ scope.row.name }}</span>
          <span style="color: purple;">{{ scope.row.age }}</span>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
const tableData = ref([
  { name: '张三', age: 20, score: 90 },
  { name: '李四', age: 22, score: 85 }
])
</script>

五、完整案例

销售报表表格案例

<template>
  <div class="sales-report">
    <el-table :data="salesData" border style="width: 100%">
      <el-table-column
        label="月份"
        :header-cell-class-name="headerCellClass"
      >
        <el-table-column
          :label="item"
          :key="item"
          :header-cell-class-name="headerCellClass"
          v-for="item in months"
        >
          <template #default="scope">
            <div v-if="scope.row.index === 0">
              <span style="color: red;">{{ scope.row[scope.column.label] }}</span>
            </div>
            <div v-else>
              <span style="color: blue;">{{ scope.row[scope.column.label] }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="total"
        label="总计"
        :header-cell-class-name="headerCellClass"
      >
        <template #default="scope">
          <div v-if="scope.row.index === 0">
            <span style="color: green;">{{ scope.row.total }}</span>
          </div>
          <div v-else>
            <span style="color: purple;">{{ scope.row.total }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

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

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
const salesData = reactive([
  {
    index: 0,
    Jan: 15000,
    Feb: 20000,
    Mar: 25000,
    Apr: 30000,
    May: 35000,
    Jun: 40000,
    total: 165000
  },
  {
    index: 1,
    Jan: 12000,
    Feb: 18000,
    Mar: 22000,
    Apr: 28000,
    May: 32000,
    Jun: 38000,
    total: 150000
  }
])

const headerCellClass = (params) => {
  if (params.row.index === 0) {
    return 'header-first-row'
  } else {
    return 'header-second-row'
  }
}
</script>

<style>
.header-first-row {
  background-color: #f0f0f0;
}
.header-second-row {
  background-color: #e0e0e0;
}
</style>

六、源码解析

1. 多级表头渲染原理

element-plus 的 el-table-column 支持 children 属性，通过递归渲染子表头。关键代码如下：

function renderHeader (h, { column, $scopedSlots }) {
  if (column.children) {
    return h('div', [
      column.children.map(child => {
        return h('el-table-column', {
          props: { label: child.label, prop: child.prop },
          scopedSlots: { default: $scopedSlots.default }
        })
      })
    ])
  }
}

2. 单元格合并逻辑

通过 rowspan 属性实现单元格合并，关键代码如下：

function renderCell (h, { row, column, $scopedSlots }) {
  if (column.rowspan) {
    return h('div', {
      style: {
        'text-align': 'center',
        'background-color': '#f0f0f0'
      }
    }, [
      h('span', {
        style: { color: 'red' }
      }, row[column.prop])
    ])
  }
}

七、进阶使用

1. 动态生成多级表头

const headers = reactive([
  {
    label: '基本信息',
    children: [
      { label: '姓名', prop: 'name' },
      { label: '年龄', prop: 'age' }
    ]
  },
  {
    label: '成绩',
    children: [
      { label: '分数', prop: 'score' },
      { label: '等级', prop: 'grade' }
    ]
  }
])

2. 复杂数据类型处理

const complexData = reactive([
  {
    name: '张三',
    age: 20,
    score: 90,
    grade: 'A',
    info: {
      address: '北京',
      phone: '123456789'
    }
  }
])

八、性能与工程实践

1. 性能优化策略

虚拟滚动：对于大数据量的表格，使用 el-table 的 height 属性配合 scroll 事件实现虚拟滚动
数据分页：通过分页处理减少一次性渲染的数据量
避免不必要的重新渲染：使用 v-if 或 v-show 控制复杂表头的渲染条件

2. 异常处理

try {
  // 处理数据转换逻辑
} catch (error) {
  console.error('数据转换异常:', error)
}

3. 安全考虑

防止XSS攻击：对用户输入数据进行过滤处理
避免数据泄露：对敏感字段进行脱敏处理

九、常见问题与踩坑

1. 常见错误分析

错误示例：

<el-table-column prop="score" label="分数">
  <template #default="scope">
    <span v-if="scope.row.score > 80">优秀</span>
  </template>
</el-table-column>

错误原因： 忘记处理 rowspan 和 colspan 的合并逻辑，导致数据错位

解决方案： 使用 rowspan 属性控制合并单元格，结合 v-if 判断显示条件

2. 性能陷阱