【无标题】vue项目中使用elementui的el-table表格进行数据的行、列的合并，多层嵌套的数组进行相同内容的列的合并功能、el-table中span-method使用

最新推荐文章于 2025-03-31 17:46:24 发布

zlinger1

最新推荐文章于 2025-03-31 17:46:24 发布

阅读量2.5k

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_41175327/article/details/130616568

版权

本文介绍了在Vue项目中使用ElementUI的el-table组件，如何处理多层嵌套数组的数据，实现数据行、列的合并。详细讲述了通过span-method方法进行行/列合并的步骤，以及在处理接口返回的复杂数据格式时的处理策略。

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

一、需求背景

功能需求需要对表格进行列的合并，这里要实现的是一个list中包含多个list，要循环出多个list进行表格的渲染，处理列的合并，渲染在页面上

二、渲染样式展示

在这里插入图片描述
如上图所示：当编号、名称、负责人相同时，对这些列进行合并处理，接口返回的数据格式为：数组周干包含多个对象，每个对象中又包含一个数组，需要把对象中的数组渲染出来，并进行相同信息的列的合并

三、技术栈

vue2、elementui中el–table的span-method方法

四、步骤

1、在el-table中加入计算行/列的方法：span-method

span-method方法介绍：
说明：合并行或列的计算方法，类型：Function({ row, column, rowIndex, columnIndex })

<el-table
	:data="item.details"
	:span-method="(param)=>spanMethod(param,index)"
	:summary-method="getSummaries"
	border
	show-summary
	style="width: 100%;min-height: 300px;"
>

由于是多个表格渲染，所以span-method需要处理多次，因此采用(param)=>spanMethod(param,index)的方式多传递一个参数进行处理

2、对数组根据自己的需求进行处理

arr.forEach((li, idx) => {
   
   let {
   departmentCode, departmentName}

最低0.47元/天解锁文章