Element的表格自帶有合併屬性：span-method
通過給
table傳入span-method方法可以實現合併行或列，方法的參數是一個對象，裏面包含當前行row、當前列column、當前行號rowIndex、當前列號columnIndex四個屬性。該函數可以返回一個包含兩個元素的數組，第一個元素代表rowspan，第二個元素代表colspan。 也可以返回一個鍵名爲rowspan和colspan的對象。
當然需要合併的行或者列，該處填充的數據字段一般是相同的纔有合併的需求。
指定列合併行數的效果：
如這裏的合併規則是 大於等於第四列的單元格，按照三行一合併。
<el-table :data="tableData" :span-method="listSpan" border style="width: 100%">
<el-table-column prop="product" label="類型" align="center"></el-table-column>
<el-table-column prop="price" label="當前價格" align="center"></el-table-column>
<el-table-column prop="qty" label="用戶持有數量" align="center"></el-table-column>
<el-table-column prop="available" label="可用保證金" align="center"></el-table-column>
<el-table-column prop="position" label="已用保證金" align="center"></el-table-column>
<el-table-column prop="price" label="強平價格" align="center"></el-table-column>
<el-table-column prop="profit" label="對沖盈虧金額" align="center"></el-table-column>
</el-table>
控制合併單元格的代碼：
listSpan({ row, column, rowIndex, columnIndex }) {
if (columnIndex >= 3) {
if (rowIndex % 3 === 0) {
return {
rowspan: 3,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
- columnIndex >=3
表示 大於等於第四列，因爲第一列實際上是第0列。也就是控制具體合併哪一列。
- rowIndex % 3 ===0
表示 當前行號是否被3整除，是的話就合併該行，合併規則由返回的 rowspan 行數，colspan列數決定。也就是你想合併幾行就判斷整除幾就行。這裏是控制 每三行合併一次。
合併列也是如此類推。