<el-table :data="tableData" :span-method="spanMethod" style="width: 100%">
<el-table-column prop="StoAlias" label="節點名稱" />
<el-table-column prop="Name" label="儲存池名稱" />
<el-table-column prop="Type" label="儲存池型別" />
<el-table-column prop="Capacity" label="總容量" />
<el-table-column prop="Available" label="可用容量" />
<el-table-column prop="Used" label="已使用容量" />
<el-table-column prop="Status" label="狀態" />
</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<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, // 合併的行數
colspan: fCol // 合併的列數,為0表示不顯示
}
}
}
sortArray()
此方法根據目標屬性值(StoAlias
)排序了。
點選 傳送門 檢視更多關於【el-table 合併行或列】的資訊。
本文來自部落格園,作者:啊睦,轉載請註明原文連結:https://www.cnblogs.com/fe32/p/17536390.html