el-table合并单元格

1、新建utils/colMethod.js

export function colMethod(columnArr, data) {// columnArr 合并行所在的列字段// data 需要合并的表格数据let column = {}let position = 0// 遍历合并的列数据columnArr.forEach((prop) => {column[prop] = []//  遍历合并的行数据data.forEach((row, rowIndex) => {// 第N列第一行column[prop][rowIndex] = [1, 1]if (rowIndex === 0) {// 记录当前行号position = 0} else if (row[prop] === data[rowIndex - 1][prop]) {// 当前行数据等于上一行，根据记录的行号，计算需要合并几行。column[prop][position][0] += 1// 当前行 隐藏不显示column[prop][rowIndex][0] = 0} else {// 不相等之后，重置记录行号position = rowIndex}})})return column}

2、页面使用

<el-table :span-method="mergeTable">
<el-table-columntype="index":index="indexMethod"></el-table-column>
</el-table>//引入
import { colMethod } from "@/utils/colMethod";//datamergeArr: {},indexNum: {},//方法//获取到列表数据后this.mergeArr = colMethod(["deviceName", "deviceStateName"],//要合并的列字段this.tableList);this.indexobj(); //排列序号// 合并单元格mergeTable({ row, column, rowIndex, columnIndex }) {let arr = this.mergeArr[column.property] || [];// 根据deviceName合并if ((column.type == "index" || column.type == "selection"||column.property == "deviceStateName") && this.mergeArr["deviceName"])return this.mergeArr["deviceName"][rowIndex];else if (arr.length) return arr[rowIndex];else [1, 1];},// 排列序号indexobj() {var num = 0;//序号根据那个字段合并this.mergeArr["deviceName"].forEach((item, index) => {if (item[0] != 0) {this.indexNum[index] = num += 1;}});},// 自定义序号indexMethod(index) {return this.indexNum[index];},