效果图：
<template>
<Table :columns="columns1" :data="data1" :span-method="handleSpan"></Table>
</template>
<script>
export default {
methods: {
handleSpan({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
// 只对 type 列进行处理
const rowspan = this.getRowspan(row, rowIndex);
if (rowspan >= 1) {
return {
rowspan,
colspan: 1,
};
} else {
return {
rowspan: 0,
colspan: 0,
};
}
}
},
getRowspan(row, rowIndex) {
const currentFactorMainNumber = row.type;
let rowspan = 1; // 默认rowspan为1，也就是每个单元格只占一行
// 如果当前行不是第一行，则先查看前一行，如果前一行的值（同列单元格）与当前行（同列单元格）相同，则将当前单元格与前一行合并（当前单元格占0行，rowspan=0）
if (rowIndex > 0) {
const previousRow = this.data1[rowIndex - 1];
const previousFactorMainNumber = previousRow.type;
if (currentFactorMainNumber === previousFactorMainNumber) {
return 0;
}
}
// 然后向查看，如果后面行（同列单元格）的值与当前行（同列单元格）相同，则每找到一行rowspan加1，直到找到与当前行（同列单元格）的值不同的行为止。（也就是说只能合并连续的行）
for (let i = rowIndex + 1; i < this.data1.length; i++) {
const nextRow = this.data1[i];
const nextFactorMainNumber = nextRow.type;
if (currentFactorMainNumber === nextFactorMainNumber) {
rowspan++;
} else {
break;
}
}
return rowspan;
},
},
data() {
return {
columns1: [
{
key: "type",
title: "类型",
tooltip: true,
},
{
key: "value",
title: "值",
tooltip: true,
},
],
data1: [
{
type: "1",
value: "1",
},
{
type: "1",
value: "2",
},
{
type: "1",
value: "3",
},
{
type: "2",
value: "4",
},
{
type: "2",
value: "5",
},
{
type: "3",
value: "6",
},
{
type: "3",
value: "7",
},
{
type: "3",
value: "8",
},
{
type: "4",
value: "9",
},
{
type: "5",
value: "10",
},
{
type: "5",
value: "11",
},
{
type: "6",
value: "12",
},
],
};
},
};
</script>