解决element ui中table列合并

1.创建一个空的数组存储处理的数据

spanArr: [], // 合并单元格

2.创建处理方法

//合并单元格
getSpanArr(data) {
    let pos = 0;
    for (let i = 0; i < data.length; i++) {
        if (i === 0) {
            this.spanArr.push(1);
            pos = 0;
        } else {
            if (data[i].hzks === data[i - 1].hzks) {
                this.spanArr[pos] += 1;
                this.spanArr.push(0);
            } else {
                this.spanArr.push(1);
                pos = i;
            }
        }
    }
    return this.spanArr;
},
handleHbhzks({row, column, rowIndex, columnIndex}) {
    if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
            rowspan: _row,
            colspan: _col
        }
    }
}

在getSpanArr中

初始化一个变量 pos 为 0，用于记录当前合并单元格的起始位置。
遍历 data 数组中的每个元素。（data就是需要处理的值）
如果当前元素是第一个元素，则将合并单元格的数量设为 1，并将 pos 设为 0。
如果当前元素不是第一个元素，并且 hzks 属性与上一个元素的 hzks 属性相同，则将合并单元格的数量加 1，并将 0 添加到 spanArr 数组中，表示当前单元格需要合并。（hzks就是需要合并的列的prop）
如果当前元素不是第一个元素，并且 hzks 属性与上一个元素的 hzks 属性不同，则将合并单元格的数量设为 1，并将 pos 设为当前元素的索引。
返回 spanArr 数组，其中每个元素表示对应单元格的合并数量。
handleHbhzks 方法：根据 spanArr 数组中的值来设置单元格的合并属性。

如果当前列的索引等于 0（即第一列），则根据 spanArr 数组中的值来设置合并属性。
rowspan：表示当前单元格的行合并数量。
colspan：表示当前单元格的列合并数量。
如果想要排除合并可以想如下方法进行替换。

if (row.hzks === '合计') {
    return {
        rowspan: 1,
        colspan: 1,
    }
}

如果当前行的 hzks 属性等于 '合计'，则返回 { rowspan: 1, colspan: 1 }，表示该单元格不合并。

handleHbhzks 方法需要使用 :span-method,使用span-method属性可以实现表格的动态行或列合并。

    <el-table
      :data="tableData"
      :span-method="handleHbhzks"
      border
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="amount1" sortable label="Amount 1" />
      <el-table-column prop="amount2" sortable label="Amount 2" />
      <el-table-column prop="amount3" sortable label="Amount 3" />
    </el-table>

注：在执行完一次合并需要再次执行时需要清空数组数据，避免数据多次处理导致格式错乱。

原文链接：https://blog.csdn.net/2301_80754757/article/details/143405072