element表格合并事件span-method传递额外参数_arrayspanmethod 传多个参数

使用el-table合并表格时,使用span-method方法进行合并,需要传递额外参数

span-method方法

默认原生的是这4个属性

当不传递参数时,具体实现代码

<el-table  :data="tableData"  :span-method="arraySpanMethod">
		<!-- 省略 -->
</el-table>

 arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      },
1
2
3
4
5
6
7
8
9
10
11
12
13

但是当有如下的场景

我这里的项目中,每一个巡检单均是一个表格数组,所有的数组都存储在一个对象tabList中,所以这里对表格合并的时候需要传递一个下标值index来表明是第几个数组

具体实现代码

<el-table
            ref="table" :data="item.tableData" max-height="250" :row-class-name="tableRowClassName"
            :span-method="(row,column,rowIndex,columnIndex)=>{return arraySpanMethod({row,column,rowIndex,columnIndex},index)}"
            style="margin-top:15px">
            <!-- 省略 -->
</el-table>

// 表格合并最后一行第2,3列
arraySpanMethod({row, column, rowIndex, columnIndex}, index) {
     
	  console.groupCollapsed("arraySpanMethod")
      console.log(row, column, rowIndex, columnIndex, index)
		// 注意这里使用时需要用row, 默认的4个属性都在row对象中
		// 可以打印查看
		
 	  const len = this.tabList[index].tableData.length
      if (row.rowIndex === len - 1) {
        if (row.columnIndex === 1) {
          return {
            rowspan: 1,
            colspan: 2
          }
        } else {
          return {
            rowspan: 1,
            colspan: 1
          }
        }
      } 
      console.groupEnd()
    }
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