Vue3项目使用element-plus中的el-table表格合并相同数据单元格(可指定列+自定义合并)

一、先看效果：

二、完整demo代码：

<template>
  <el-table :data="tableData" :span-method="fnSpanMethod" border>
    <el-table-column type="index" label="序号" align="center" width="80" />
    <el-table-column prop="class" label="班级" align="center" />
    <el-table-column prop="name" label="姓名" align="center" />
    <el-table-column prop="gender" label="性别" align="center" />
    <el-table-column prop="age" label="年龄" align="center" />
    <el-table-column prop="result" label="成绩" align="center" />
  </el-table>
</template>

<script setup>
import { ref } from 'vue';

// 表格数据
const tableData = ref([
  {
    class: "一年级",
    name: "张三",
    gender: "女",
    age: "7",
    result: "80",
  },
  {
    class: "三年级",
    name: "李四",
    gender: "男",
    age: "10",
    result: "85",
  },
  {
    class: "三年级",
    name: "王五",
    gender: "男",
    age: "9",
    result: "100",
  },
  {
    class: "五年级",
    name: "李华",
    gender: "女",
    age: "15",
    result: "99",
  },
  {
    class: "五年级",
    name: "赵六",
    gender: "女",
    age: "13",
    result: "96",
  },
  {
    class: "六年级",
    name: "孙七",
    gender: "男",
    age: "15",
    result: "100",
  }
]);

// 合并单元格的方法
const fnSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // 合并一样的班级列 class属性
  if (columnIndex === 1) {
    if (rowIndex === 0 || (rowIndex > 0 && row.class !== tableData.value[rowIndex - 1]?.class)) {
      let rowspan = 1;
      for (let i = rowIndex + 1; i < tableData.value.length; i++) {
        if (tableData.value[i].class === row.class) {
          rowspan++;
        } else {
          break;
        }
      }
      return { rowspan, colspan: 1 };
    } else {
      return { rowspan: 0, colspan: 0 };
    }
  }
};
</script>

简单易懂 demo代码 复制到项目里面即可实现

三、如果想合并性别字段：

fnSpanMethod方法里面添加代码即可：

// 合并单元格的方法
const fnSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // 合并一样的班级列 class属性
  if (columnIndex === 1) {
    if (rowIndex === 0 || (rowIndex > 0 && row.class !== tableData.value[rowIndex - 1]?.class)) {
      let rowspan = 1;
      for (let i = rowIndex + 1; i < tableData.value.length; i++) {
        if (tableData.value[i].class === row.class) {
          rowspan++;
        } else {
          break;
        }
      }
      return { rowspan, colspan: 1 };
    } else {
      return { rowspan: 0, colspan: 0 };
    }
  }

  // 合并一样的性别列 gender属性
  if (columnIndex === 3) {
    if (rowIndex === 0 || (rowIndex > 0 && row.gender !== tableData.value[rowIndex - 1]?.gender)) {
      let rowspan = 1;
      for (let i = rowIndex + 1; i < tableData.value.length; i++) {
        if (tableData.value[i].gender === row.gender) {
          rowspan++;
        } else {
          break;
        }
      }
      return { rowspan, colspan: 1 };
    } else {
      return { rowspan: 0, colspan: 0 };
    }
  }
};