效果:
vxe-table:
通过自定义 span-method 合并方法 Function({row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, data})
elementUI table:
通过自定义span-method 合并方法 Function({ row, column, rowIndex, columnIndex })
以下代码为vxe-table:
<vxe-grid
highlight-current-row
border
rowId="id"
resizable
:height="vxe_height"
size="mini"
:loading="loading"
:columns="columns"
:data="tableData"
ref="xGrid"
:span-method="colspanMethod"
>
表格数据:
//表格数据:
private tableData: any = [
{ id: 1, name: '百度', link: 'https://www.baidu.com/', saleOrder: 1 },
{ id: 2, name: '脸书', link: 'https://www.facebook.com/', saleOrder: 1 },
{ id: 3, name: '京东', link: 'https://www.jd.com/', saleOrder: 2 },
{ id: 4, name: '淘宝', link: 'https://www.taobao.com/', saleOrder: 3 },
{ id: 5, name: '谷歌', link: 'https://www.google.com/', saleOrder: 3 },
{ id: 6, name: '谷歌', link: 'https://www.google.com/', saleOrder: 3 },
];
private formatColspan(arr): void {
let colspanResult : any= []; // 合并的结果:[2, 0, 1, 3, 0, 0],有相同的第一个累加,后面的都为0
let colspanIndex: number = 0;
arr.forEach((item, index) => {
//如果是第一项:默认给1
if (index === 0) {
colspanResult.push(1);
} else {
//如果不是第一项:
//该项与前一项相比字段:
if (item.saleOrder === arr[index - 1].saleOrder) {
//第2列需合并相同内容的判断条件
colspanResult[colspanIndex] += 1;
colspanResult.push(0);
} else {
colspanResult.push(1);
colspanIndex = index;
}
}
});
return colspanResult;
}
private colspanMethod({
row,
rowIndex,
$rowIndex,
column,
columnIndex,
$columnIndex,
data
}): void {
if (columnIndex === 1) {
let arr: any = this.formatColspan(data);
const _row = arr[rowIndex];
const _col = _row > 0 ? 1 : 0;
let a: any = {
rowspan: _row,
colspan: _col
};
return a;
}
}