vxe-table中vxe-grid中的合并单元格(合并行、列)
效果图(我所用到的是合并行):根据personName人员名称相同合并行
<vxe-grid v-bind="gridOptions" ref="tableRefs"></vxe-grid>
// 列表表格数据
const gridOptions = ref({
data: [],
align: 'center',
loading: false,
border: true,
height: '300px',
columns: [
{ type: 'seq', width: 50 },
{
title: '人员名称',
field: 'personName'
},
{
title: '人员类型',
field: 'typeName'
},
{
title: '代垫公司',
field: 'proxyOrgName'
},
{
title: '开始时间',
field: 'startTime'
},
{
title: '结束时间',
field: 'endTime'
}
]
});
const getPage = async () => {
gridOptions.value.loading = true;
const res = await PersonnelTypeManagementApi.personHistory({
pageNo: customMade.value.pageNo,
pageSize: customMade.value.pageSize,
orgId: rightOrgId.value,
personId: props.rowData.personId
});
gridOptions.value.loading = false;
gridOptions.value.data = res.data.rows;
nextTick(() => { //必须在nextTick中请求,否则表格不会重新渲染
updateMergeCells(res.data.rows);
});
customMade.value.total = res.data.totalRows;
};
// 合并规则
const updateMergeCells = tableData => {
const merges = [];
let prevPersonName = null;
let count = 0;
for (let rowIndex = 0; rowIndex < tableData.length; rowIndex++) {
const currentRow = tableData[rowIndex];
if (prevPersonName === currentRow.personName) {
count++;
} else {
if (count > 0) {
// 注意这里 row 是从 rowIndex - count 开始的
merges.push({ row: rowIndex - count - 1, col: 1, rowspan: count + 1, colspan: 1 });
}
prevPersonName = currentRow.personName;
count = 0;
}
}
// 处理最后一组相同的 personName
if (count > 0) {
merges.push({ row: tableData.length - count - 1, col: 1, rowspan: count + 1, colspan: 1 });
}
if (tableRefs.value) {
tableRefs.value.setMergeCells(merges);//设置合并
}
};