vue3 中實現 Element Plus 表格合并的方法

更新時間：2025年09月23日 09:23:07 作者：Liu.774

在Vue3和Element Plus中實現表格合并需要使用span-method方法,本文給大家介紹vue3中實現Element Plus表格合并的方法,感興趣的朋友跟隨小編一起看看吧

vue3 中實現 Element Plus 表格合并

在 Vue3 和 Element Plus 中實現表格合并需要使用 span-method 方法。該方法可以自定義合并行或列的規(guī)則，通過返回一個包含行合并數和列合并數的數組來控制單元格的合并方式。

基本使用方法

在 Element Plus 表格組件中，通過 :span-method 屬性綁定一個方法，該方法接收一個對象參數，包含當前行 row、當前列 column、當前行號 rowIndex 和當前列號 columnIndex。返回一個數組 [rowspan, colspan] 表示合并的行數和列數。

<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>

動態(tài)合并相同內容的行

對于需要合并相同內容的行，可以通過遍歷數據并記錄合并位置來實現：

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 中根據列索引返回不同的合并規(guī)則：

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]
    }
  }
}