【无标题】vue项目中使用elementui的el-table表格进行数据的行、列的合并，多层嵌套的数组进行相同内容的列的合并功能、el-table中span-method使用_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;"
>
1
2
3
4
5
6
7
8

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

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

arr.forEach((li, idx) => {
   let {departmentCode, departmentName} = li
   this.listData.push({departmentCode, departmentName, details: []})
   li.details.forEach(f => {
     f.records.forEach(item => {
       item.objTotal = f
       this.listData[idx].details.push(item)
     })
   })
 })
 this.getSpanArr(this.listData)
1
2
3
4
5
6
7
8
9
10
11

getSpanArr(data) {
  data.map((item, idx) => {
    this.spanArr.push([])
    for (let i = 0; i < item.details.length; i++) {
      if (i === 0) {
        this.spanArr[idx].push(1)
        this.pos = 0
      } else {
        // 判断当前元素与上一个元素是否相同
        if (item.details[i].jjflCode === item.details[i - 1].jjflCode) {
          this.spanArr[idx][this.pos] += 1
          this.spanArr[idx].push(0)
        } else {
          this.spanArr[idx].push(1)
          this.pos = i
        }
      }
    }
  })
},

spanMethod({ row, column, rowIndex, columnIndex }, index) {
  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
    const _row = this.spanArr[index][rowIndex]
    const _col = _row > 0 ? 1 : 0
    return {
      // [0,0] 表示这一行不显示， [2,1]表示行的合并数
      rowspan: _row,
      colspan: _col
    }
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

好啦，前端读取excel就介绍到这里吧，有疑问欢迎留言喔~~觉得有用就收藏一下吧，不然下次会找不到了哟^ _ ^