element-plus el-table合并单元格

在使用element-plus表格的时候为了数据的美观性，需要将单元格合并，此代码严格来说只能算是行合并，这个代码的好处就是不会因为合并导致数据的列串了

效果图

接下来是代码,使用了setup语法糖

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

//模拟数据
const data = ref([
  {
    id: 1,
    column1: "合并列",
    column2: "测试数据1",
    column3: "测试数据2",
  },
  {
    id: 2,
    column1: "合并列",
    column2: "测试数据3",
    column3: "测试数据4",
  },
  {
    id: 3,
    column1: "合并列1",
    column2: "测试数据5",
    column3: "测试数据6",
  },
  {
    id: 4,
    column1: "合并列2",
    column2: "测试数据7",
    column3: "测试数据8",
  },
  {
    id: 5,
    column1: "合并列2",
    column2: "测试数据9",
    column3: "测试数据10",
  },
  {
    id: 6,
    column1: "合并列2",
    column2: "测试数据11",
    column3: "测试数据12",
  },
  {
    id: 7,
    column1: "合并列2",
    column2: "测试数据13",
    column3: "测试数据14",
  },
]);

//合并函数

//根据column1的值是否一致合并行并将数据上下居中
function merge({ rowIndex, columnIndex }) {
  //根据列索引判断是否需要合并 
  // 1为第一列 可向后拼接(从0开始)，即2是第三列
  if (columnIndex === 1) {
    const currentRow = data.value[rowIndex];
    const rowCount = data.value.filter(
      (item) => item.column1 === currentRow.column1
    ).length;
    const firstIndex = data.value.findIndex(
      (item) => item.column1 === currentRow.column1
    );
    //如果当前行索引等于第一个索引，则合并行
    if (rowIndex === firstIndex) {
      //返回合并行的范围
      return {
        rowspan: rowCount,
        colspan: 1,
      };
      //否则返回不合并
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      };
    }
  }
  return {
    rowspan: 1,
    colspan: 1,
  };
}
<script>

<!-- :span-method="merge" 调用函数 -->
<el-table
  align="center"
  :data="data"
  border
  style="width: 100%"
  :span-method="merge" 
>
  <el-table-column label="ID" align="center" width="150" prop="id" />
  <el-table-column
    label="合并列"
    align="center"
    width="150"
    prop="column1"
  />
  <el-table-column label="值" align="center" width="150" prop="column2" />
  <el-table-column label="值" align="center" width="150" prop="column3" />
</el-table>