vue3 中实现 Element Plus 表格合并

在 Vue3 和 Element Plus 中实现表格合并需要使用 span-method 方法。该方法可以自定义合并行或列的规则，通过返回一个包含行合并数和列合并数的数组来控制单元格的合并方式。

基本使用方法

在 Element Plus 表格组件中，通过 :span-method 属性绑定一个方法，该方法接收一个对象参数，包含当前行 row、当前列 column、当前行号 rowIndex 和当前列号 columnIndex。返回一个数组 [rowspan, colspan] 表示合并的行数和列数。

html 复制代码

<template>
  <el-table :data="tableData" :span-method="arraySpanMethod" border>
    <el-table-column prop="id" label="ID" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="amount" label="Amount"></el-table-column>
  </el-table>
</template>

<script setup>
const tableData = [
  { id: '1', name: 'Apple', amount: '10' },
  { id: '1', name: 'Apple', amount: '20' },
  { id: '2', name: 'Orange', amount: '30' },
  { id: '2', name: 'Orange', amount: '40' },
  { id: '3', name: 'Banana', amount: '50' },
]

const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return [2, 1]
    } else {
      return [0, 0]
    }
  }
}
</script>

动态合并相同内容的行

对于需要合并相同内容的行，可以通过遍历数据并记录合并位置来实现：

javascript 复制代码

const getSpanArr = (data) => {
  const spanArr = []
  let pos = 0
  for (let i = 0; i < data.length; i++) {
    if (i === 0) {
      spanArr.push(1)
      pos = 0
    } else {
      if (data[i].id === data[i - 1].id) {
        spanArr[pos] += 1
        spanArr.push(0)
      } else {
        spanArr.push(1)
        pos = i
      }
    }
  }
  return spanArr
}

const spanArr = getSpanArr(tableData)

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0 || columnIndex === 1) {
    const _row = spanArr[rowIndex]
    const _col = _row > 0 ? 1 : 0
    return [_row, _col]
  }
}

多列合并实现

当需要同时合并多列时，可以在 span-method 中根据列索引返回不同的合并规则：

javascript 复制代码

const multiSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex % 3 === 0) {
      return [3, 1]
    } else {
      return [0, 0]
    }
  } else if (columnIndex === 1) {
    if (rowIndex % 2 === 0) {
      return [2, 1]
    } else {
      return [0, 0]
    }
  }
}

注意事项

合并单元格时，被合并的单元格需要返回 [0, 0]，表示该单元格不显示
合并行数或列数不能超过表格的总行数或总列数
复杂的合并逻辑可能需要预处理数据，生成合并规则数组
在动态数据场景下，需要在数据变化时重新计算合并规则

通过以上方法可以实现 Element Plus 表格的各种合并需求，从简单的固定合并到复杂的动态内容合并。