el-table 合并单元格

最新推荐文章于 2025-07-14 16:50:17 发布

原创最新推荐文章于 2025-07-14 16:50:17 发布 · 8.4k 阅读

14 ·

CC 4.0 BY-SA版权

应用场景专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种前端技术，用于处理后端返回的数据并实现在表格中动态显示及单元格合并的功能。具体包括如何通过计算列标题和使用`objectSpanMethod`函数来控制单元格的合并与隐藏。

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

在做需求的时候，我们总是能遇到各种各样奇葩的需求… o(╯□╰)o
但是呢，依然挡不住一颗探索的心呐！先上展示效果。
在这里插入图片描述

需求是这样的:

在前端上传文件后由后端解析成数据再传回前端做展示，但是传到前端的数据呢，是一行一行的，但是有些单元格却是需要合并，因此，后端会返回两个数组，一个数组是数据，另一个数据是需要合并的单元格格式，如图：

CellsdataTable 是后端返回的数据行
Mergecell 是需要合并的单元格信息
由于是用户自己上传的文件，行和列都不确定，前端需要动态地展示列标题。

废话不多说了，上代码：

:span-method=“objectSpanMethod” // 是每个单元格的合并格式函数，会接收包含了四个参数的对象 { row, column, rowIndex, columnIndex }，分别是行数据，列数据，行标识，列标识。
文中 fileTitle 是计算出来的列标题，在此循环

<el-table
   border
   ref="fileTable"
   :data="fileUploadData"
   class="table-reset"
   size="small"
   :span-method="objectSpanMethod" 
   >
   <el-table-column align='center' width="40" fixed="left" type="selection"></el-table-column>
   <!-- fileTitle 是计算出来的列标题 ，在此循环就可以啦 -->
   <el-table-column v-for="(title, index) in fileTitle" :key="index" :prop="title.name" :label="title.name"  align='center'></el-table-column>
   <el-table-column width="70" fixed="right" label='选为标题'>
     <template slot-scope="scope">
       <span class="cbtn cbtn-yellow" @click="onTitle($event, scope.row)"></span>
     </template>
   </el-table-column>
 </el-table>

由于我在前端加了分页，所以每行的数据需要处理一下

objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
   // 当前行
   rowIndex = rowIndex + (this.currentPage - 1) * this.pageSize // 此处是根据当前页码和每页展示的数据，算出当前的实际行数，如果没有做分页的同学，可以忽略此步骤

	// 判断有无需要合并的单元格，mergecell 是后端返回的
   if (this.mergecell.length !== 0) {
   	// 在此过滤掉不符合条件的单元格格式
     let crow = this.mergecell.filter(val => {
       return rowIndex >= val.Row && rowIndex < val.Row + val.RowSpan && columnIndex >= val.Col + 1 && columnIndex < val.Col + val.ColSpan + 1
       // 此处意思是 判断当前的合并单元格信息，有无包含当前单元格
     })
     if (crow && crow.length !== 0) { // 判断是否有符合信息
       if (crow[0].Row === rowIndex && crow[0].Col + 1 === columnIndex) { // 由于 crow获取的是当前单元格信息包含的单元格，所以要判断一下是否是当前单元格
       // 如果是，则返回单元格格式
         return {
           rowspan: crow[0].RowSpan,
           colspan: crow[0].ColSpan
         }
       } else {
       	// 如果不是，则隐藏当前格子
         return {
           rowspan: 0,
           colspan: 0
         }
       }
     }
   }
 },