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

一、需求背景

功能需求需要对表格进行列的合并，这里要实现的是一个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} = li
   this.listDat