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列数决定。也就是你想合并几行就判断整除几就行。这里是控制 每三行合并一次。
合并列也是如此类推。