vue3 结合element-plus组件库使用table进行合并行_vue3 el-table 增加合计行及合并行

需求 比如：

个人查看element-plus文档，去结合使用 [链接](Table 表格 | Element Plus (element-plus.org))

element文档中有“合并行或列”的例子： 多行或多列共用一个数据时，可以合并行或列。

通过给 table 传入span-method方法可以实现合并行或列， 方法的参数是一个对象，里面包含当前行 row、当前列 column、当前行号 rowIndex、当前列号 columnIndex 四个属性。 该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。 也可以返回一个键名为 rowspan 和 colspan 的对象；

话不多说，上代码！

import type { TableColumnCtx } from 'element-plus';
//举例数据格式
const data = [
    {
        userName: "营业收费系统",
        value1: "中国农业银行",
        value2: "2022-03",
        detectionTime: "2022-03-04",
    },
    {
        userName: "营业收费系统",
        value1: "中国农业银行",
        value2: "2022-03",
        detectionTime: "2022-03-04",
    },
    {
        userName: "营业收费系统",
        value1: "中国农业银行",
        value2: "2022-03",
        detectionTime: "2022-03-04",
    },
    {
        userName: "营业收费系统",
        value1: "中国农业银行",
        value2: "2022-03",
        detectionTime: "2022-03-04",
    }
 ];
 
//需要判断的属性组
const spanProps = ['userName', 'detectionTime'];
 
let rowSpansMap = new Map(); //存需要开始合并的行号，向下合并多少行
 
/**
 * 根据列表数据得出需要合并的行
 * @param data 列表数据
 */
const spanPropGroup = (data: any) => {
  let oldRow: any = null; //需要合并的行
  rowSpansMap = new Map(); //重置Map
 
  oldRow = data[0]; //默认第0行为需要合并的行
  rowSpansMap.set(0, 1); //第0行，向下合并一行(其实就是自己单独一行)
  let spanRow = 0; //记录需要开始合并的行号
  for (let i = 1; i < data.length; i++) {
    const item = data[i];
    let isSame = true;
    //遍历需要判断的属性判断对应值是否全部相等
    for (let j = 0; j < spanProps.length; j++) {
      const prop = spanProps[j];
      //只要有一个属性值不相等则记录新的需要合并的行号
      if (item[prop] != oldRow[prop]) {
        oldRow = item;
        rowSpansMap.set(i, 1);
        spanRow = i;
        isSame = false;
        break;
      }
    }
    //如果所有属性值相同则所需要合并的行数+1
    if (isSame) {
      let span = rowSpansMap.get(spanRow);
      rowSpansMap.set(spanRow, span + 1);
    }
  }
};
 
const objectSpanMethod: any = ({ row, column, rowIndex, columnIndex }) => {
  //采样值1-5列所对应的行不需要合并
  if (columnIndex != 3 && columnIndex != 4) {
    //根据当前行号从map中获取开始合并的行根据当前行号从map中获取开始合并的行号，向下合并多少行
    const span = rowSpansMap.get(rowIndex);
    if (span != null) {
      return {
        rowspan: span, //向下合并span行
        colspan: 1,
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
};
//进行传递数据
spanPropGroup(data);

<template>
    <el-table
        :data="data"
        border
        :span-method="objectSpanMethod"
    >
        <el-table-column type="selection" width="55" />
        <el-table-column label="#" width="60" prop="">
            <template #default="{ $index }">
                {{ $index + 1 }}
            </template>
        </el-table-column>
        <el-table-column
            label="指标组合名称"
            align="center"
            prop="userName"
            show-overflow-tooltip
        />
        <el-table-column
            label="已使用使用指标"
            align="center"
            prop="value1"
            show-overflow-tooltip
        />
        <el-table-column
            label="权重"
            align="center"
            prop="value2"
            show-overflow-tooltip
        />
        <el-table-column
            label="计算状态"
            align="center"
            prop="detectionTime"
            show-overflow-tooltip
        /> 
        <el-table-column label="操作" width="160" resizable>
            <template #default="scope">
                <el-buttontype="text">删除</el-button>
            </template>
       </el-table-column>
    </el-table>
</template>

这样的效果就达到想要的需求了，细心观察一下代码！