原文鏈接：Element Plus el-table 自定義合并行和列

前言

目標(biāo)效果是將表格行數(shù)據(jù)中某個屬性值相同的項(xiàng)合并到一起饥瓷，效果如下：

image.png

<el-table :data="tableData" :span-method="spanMethod" style="width: 100%">
    <el-table-column prop="StoAlias" label="節(jié)點(diǎn)名稱" />
    <el-table-column prop="Name" label="存儲池名稱" />
    <el-table-column prop="Type" label="存儲池類型" />
    <el-table-column prop="Capacity" label="總?cè)萘? />
    <el-table-column prop="Available" label="可用容量" />
    <el-table-column prop="Used" label="已使用容量" />
    <el-table-column prop="Status" label="狀態(tài)" />
</el-table>

import type { TableColumnCtx } from 'element-plus'

const tableData = [
  { "Available": 0, "Capacity": 0, "Name": "test05", "Status": 0, "StoAlias": "test", "Type": 0, "Used": 0 },
  { "Available": 0, "Capacity": 0, "Name": "test01", "Status": 0, "StoAlias": "169.254.218", "Type": 0, "Used": 0 },
  { "Available": 0, "Capacity": 0, "Name": "tset03", "Status": 0, "StoAlias": "test", "Type": 1, "Used": 0 },
  { "Available": 0, "Capacity": 0, "Name": "test02", "Status": 0, "StoAlias": "test03", "Type": 0, "Used": 0 },
  { "Available": 0, "Capacity": 0, "Name": "test06", "Status": 0, "StoAlias": "test03", "Type": 0, "Used": 0 },
  { "Available": 0, "Capacity": 0, "Name": "test04", "Status": 0, "StoAlias": "169.254.218", "Type": 0, "Used": 0 },
  { "Available": 0, "Capacity": 0, "Name": "test07", "Status": 0, "StoAlias": "169.254.218", "Type": 1, "Used": 0 }
]

let cellList: any[] = [] // 單元格數(shù)組
let count: number = 0 // 計數(shù)

const computeCell = (tableList: any[]) => {
  cellList = []
  count = 0
  for (let i = 0; i < tableList.length; i++) {
    if (i === 0) {
      // 先設(shè)置第一項(xiàng)
      cellList.push(1); // 初為1斋扰，若下一項(xiàng)和此項(xiàng)相同东且，就往cellList數(shù)組中追加0
      count = 0; // 初始計數(shù)為0
    } else {
      if (tableList[i].StoAlias == tableList[i - 1].StoAlias) {
        cellList[count] += 1; // 增加計數(shù)
        cellList.push(0); // 相等就往cellList數(shù)組中追加0
      } else {
        cellList.push(1); // 不等就往cellList數(shù)組中追加1
        count = i; // 將索引賦值為計數(shù)
      }
    }
  }
}

const sortArray = (x: any, y: any) => {
  if (x.StoAlias < y.StoAlias) { return -1 }
  else if (x.StoAlias > y.StoAlias) { return 1 }
  else { return 0 }
}

interface SpanMethodProps {
  row: StoragePoolItem
  column: TableColumnCtx<StoragePoolItem>
  rowIndex: number
  columnIndex: number
}

const spanMethod = ({
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
    computeCell(tableData.sort(sortArray))
    if (columnIndex === 0) {
      const fRow = cellList[rowIndex]
      const fCol = fRow > 0 ? 1 : 0
      return {
        rowspan: fRow, // 合并的行數(shù)
        colspan: fCol // 合并的列數(shù)截珍，為0表示不顯示
      }
    }
}

sortArray()此方法根據(jù)目標(biāo)屬性值（StoAlias）排序了。

點(diǎn)擊 傳送門 查看更多關(guān)于【el-table 合并行或列】的信息嗜侮。