场景:切换页码也能满足合并的能力("ant-design-vue": "^1.7.1")
模板
<div class='wrapper'>
<a-table
:columns="columns"
:data-source="data"
:pagination="{
pageSize: currentPageSize,
current: currentPage,
onChange: changPage,
}"
>
</a-table>
</div>
处理rowSpan
const columns_ = [
{
title: 'field_name',
dataIndex: 'field_name',
customRender(value, record, _rowIndex) {
const obj = {
children: value,
attrs: { },
};
const data_ = self.data;
const curPage = self.currentPage;
const curPageSize = self.currentPageSize;
const start = (curPage - 1) * curPageSize;
const end = data_.length > curPageSize * curPage ?
data_.length -1 : curPageSize * curPage;
const curPageData = data_.slice(start, end);
const fields = ['field_name']
const cellValue = record[fields];
if (cellValue) {
const prevRow = curPageData[_rowIndex - 1]
let nextRow = curPageData[_rowIndex + 1]
if (prevRow && prevRow[fields] === cellValue) {
obj.attrs.rowSpan = 0;
obj.attrs.colSpan = 0;
} else {
let countRowspan = 1
while (nextRow && nextRow[fields] === cellValue) {
nextRow = curPageData[++countRowspan + _rowIndex]
}
if (countRowspan > 1) {
obj.attrs.rowSpan = countRowspan;
obj.attrs.colSpan = 1;
}
}
}
return obj;
},
},
...filterColumns_,
]