在开发时，往往多行共用一个数据时，需要进行合并成一个单元格，使表格看起来清晰明了；

效果图：

实现流程：

1.表格数据

  tableData: [
    { date: '2023-08-22', name: 'Tom', address: '四川-成都' },
    { date: '2023-08-20', name: 'John', address: '四川-南充' },
    { date: '2023-08-15', name: 'Morgan', address: '四川-达州' },
    { date: '2023-08-22', name: 'Jessy', address: '四川-攀枝花' },
    { date: '2023-08-15', name: 'Jessy', address: '四川-绵阳' },
    { date: '2023-08-22', name: 'Jessy', address: '四川-广元' },
    { date: '2023-08-20', name: 'Jessy', address: '四川-巴中' },
  ]

可以观察到以上数据顺序是混乱的，要进行合并，首先需要把要合并的字段行排列在一起，这里可以使用字符串的 localeCompare方法，然后通过数组sort进行排序：

  data.tableData = tableData.sort((a: any, b: any) =>a.date.localeCompare(b.date))

2.通用函数合并行

el-table合并单元格，通过给 table 传入span-method方法可以实现合并行或列， 方法的参数是一个对象一共有4个参数，具体参数介绍可以查看官网：Table 表格 | Element Plus

const spanMethod = ({ row, column, rowIndex, columnIndex, }: SpanMethodProps) => {
  //定义需要合并的列字段，有哪些列需要合并，就自定义添加字段即可
  const fields = ['date']
  // 当前行的数据
  const cellValue = row[column.property]
  // 判断只合并定义字段的列数据
  if (cellValue && fields.includes(column.property)) {
    const prevRow = data.tableData[rowIndex - 1] //上一行数据
    let nextRow = data.tableData[rowIndex + 1] //下一行数据
    // 当上一行的数据等于当前行数据时，当前行单元格隐藏
    if (prevRow && prevRow[column.property] === cellValue) {
      return { rowspan: 0, colspan: 0 }
    } else {
      // 反之，则循环判断若下一行数据等于当前行数据，则当前行开始进行合并单元格
      let countRowspan = 1 //用于合并计数多少单元格
      while (nextRow && nextRow[column.property] === cellValue) {
        nextRow = data.tableData[++countRowspan + rowIndex]
      }
      if (countRowspan > 1) {
        return { rowspan: countRowspan, colspan: 1 }
      }
    }
  }
}

该通用合并函数可以具体参考vxe-table~，直接复制即用

完整代码：

<template>
  <div>
    <el-table :data="data.tableData" style="width: 100%" border :span-method="spanMethod">
      <el-table-column label="Date" prop="date" />
      <el-table-column label="Name" prop="name" />
      <el-table-column label="Dddress" prop="address" />
    </el-table>
  </div>
</template>

<script setup lang="ts">
import type { TableColumnCtx } from 'element-plus'

const data = reactive<any>({
  tableData: [
    { date: '2023-08-22', name: 'Tom', address: '四川-成都' },
    { date: '2023-08-20', name: 'John', address: '四川-南充' },
    { date: '2023-08-15', name: 'Morgan', address: '四川-达州' },
    { date: '2023-08-22', name: 'Jessy', address: '四川-攀枝花' },
    { date: '2023-08-15', name: 'Jessy', address: '四川-绵阳' },
    { date: '2023-08-22', name: 'Jessy', address: '四川-广元' },
    { date: '2023-08-20', name: 'Jessy', address: '四川-巴中' },
  ]
})
interface User {
  date: string
  name: string
  address: string
}
interface SpanMethodProps {
  row: User
  column: TableColumnCtx<User>
  rowIndex: number
  columnIndex: number
}
const spanMethod = ({ row, column, rowIndex, columnIndex, }: SpanMethodProps) => {
  data.tableData = data.tableData.sort((a: any, b: any) => a.date.localeCompare(b.date))
  //定义需要合并的列字段，有哪些列需要合并，就自定义添加字段即可
  const fields = ['date']
  // 当前行的数据
  const cellValue = row[column.property]
  // 判断只合并定义字段的列数据
  if (cellValue && fields.includes(column.property)) {
    const prevRow = data.tableData[rowIndex - 1] //上一行数据
    let nextRow = data.tableData[rowIndex + 1] //下一行数据
    // 当上一行的数据等于当前行数据时，当前行单元格隐藏
    if (prevRow && prevRow[column.property] === cellValue) {
      return { rowspan: 0, colspan: 0 }
    } else {
      // 反之，则循环判断若下一行数据等于当前行数据，则当前行开始进行合并单元格
      let countRowspan = 1 //用于合并计数多少单元格
      while (nextRow && nextRow[column.property] === cellValue) {
        nextRow = data.tableData[++countRowspan + rowIndex]
      }
      if (countRowspan > 1) {
        return { rowspan: countRowspan, colspan: 1 }
      }
    }
  }
}
</script>

以上就是el-table表格合并行列的内容，欢迎大家进行讨论~~