Element Plus el-table 自定義合并行和列

(資料圖片僅供參考)

原文鏈接：Element Plus 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[] = [] // 單元格數組let count: number = 0 // 計數const computeCell = (tableList: any[]) => {  cellList = []  count = 0  for (let i = 0; i < tableList.length; i++) {    if (i === 0) {      // 先設置第一項      cellList.push(1); // 初為1，若下一項和此項相同，就往cellList數組中追加0      count = 0; // 初始計數為0    } else {      if (tableList[i].StoAlias == tableList[i - 1].StoAlias) {        cellList[count] += 1; // 增加計數        cellList.push(0); // 相等就往cellList數組中追加0      } else {        cellList.push(1); // 不等就往cellList數組中追加1        count = i; // 將索引賦值為計數      }    }  }}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  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, // 合并的行數        colspan: fCol // 合并的列數，為0表示不顯示      }    }}

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

點擊 傳送門 查看更多關于【el-table 合并行或列】的信息。

關鍵詞：