el-table中合并垂直方向的单元格
一、合并垂直方向单元格，有相同字段的合并一起
合并一起的都有相同的字段mergeType
javascript
<el-table
class="merge-table"
:data="tableData"
v-loading="isLoading"
:span-method="spanMethod"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
size="mini"
empty-text="暂无数据"
:stripe="true"
border
style="width: 100%"
>
</el-table>
spanMethod({ row, column, rowIndex, columnIndex }) {
if (
columnIndex === 0 ||
columnIndex === 1 ||
columnIndex === 2 ||
columnIndex === 3 ||
columnIndex === 4 ||
columnIndex === 5 ||
columnIndex === 6 ||
columnIndex === 7
) {
// 缓存通过筛选条件得到的数组，避免重复计算
const tempArr = this.tableData.filter(b => b.mergeType === row.mergeType);
const isFirstRow =
rowIndex === this.tableData.findIndex(item => item.mergeType === row.mergeType);
if (isFirstRow) {
return {
rowspan: tempArr.length,
colspan: 1,
};
} else {
return {
rowspan: 0,
colspan: 0,
};
}
} else {
return {
rowspan: 1,
colspan: 1,
};
}
},