vue3 中實(shí)現(xiàn) Element Plus 表格合并的方法

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

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

vue3 中實(shí)現(xiàn) Element Plus 表格合并

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

基本使用方法

在 Element Plus 表格組件中，通過 :span-method 屬性綁定一個(gè)方法，該方法接收一個(gè)對(duì)象參數(shù)，包含當(dāng)前行 row、當(dāng)前列 column、當(dāng)前行號(hào) rowIndex 和當(dāng)前列號(hào) columnIndex。返回一個(gè)數(shù)組 [rowspan, colspan] 表示合并的行數(shù)和列數(shù)。

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

動(dòng)態(tài)合并相同內(nèi)容的行

對(duì)于需要合并相同內(nèi)容的行，可以通過遍歷數(shù)據(jù)并記錄合并位置來實(shí)現(xiàn)：

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

多列合并實(shí)現(xiàn)

當(dāng)需要同時(shí)合并多列時(shí)，可以在 span-method 中根據(jù)列索引返回不同的合并規(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]
    }
  }
}

注意事項(xiàng)

合并單元格時(shí)，被合并的單元格需要返回 [0, 0]，表示該單元格不顯示
合并行數(shù)或列數(shù)不能超過表格的總行數(shù)或總列數(shù)
復(fù)雜的合并邏輯可能需要預(yù)處理數(shù)據(jù)，生成合并規(guī)則數(shù)組
在動(dòng)態(tài)數(shù)據(jù)場(chǎng)景下，需要在數(shù)據(jù)變化時(shí)重新計(jì)算合并規(guī)則

通過以上方法可以實(shí)現(xiàn) Element Plus 表格的各種合并需求，從簡(jiǎn)單的固定合并到復(fù)雜的動(dòng)態(tài)內(nèi)容合并。

到此這篇關(guān)于vue3 中實(shí)現(xiàn) Element Plus 表格合并的文章就介紹到這了,更多相關(guān)vue element plus表格合并內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: