el-table实现指定列合并

最新推荐文章于 2025-06-27 16:25:29 发布

是张鱼小丸子鸭

最新推荐文章于 2025-06-27 16:25:29 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

张鱼小丸子

本文链接：https://blog.csdn.net/qq_60976312/article/details/132159535

本文介绍如何在Vue.js的el-table组件中实现指定列的合并。通过传入一个方法，利用对象参数来判断合并条件，返回数组或对象来定义合并范围。示例代码展示了如何合并具有相同数据的学校和年级列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象

代码

<template>
  <div id="app">
     <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      :header-cell-style="{ textAlign: 'center', backgroundColor: '#F5F7FA' }"
    >
      <el-table-column prop="School" label="学校" align="center">
      </el-table-column>
      <el-table-column prop="Grade" label="年级" align="center" />
      <el-table-column prop="Class" label="班级" align="center" />
      <el-table-column prop="Name" label="姓名" align="center" />
      <el-table-column prop="Chinese" label="语文" align="center" />
      <el-table-column pro