一、需求背景
功能需求需要对表格进行列的合并,这里要实现的是一个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}