实现结果
<el-table
border
v-loading="state.loading"
:data="state.tableDataList"
:height="pagTabHeight"
row-key="id"
ref="tableRef"
:highlight-current-row="true"
@row-click="rowClick"
:span-method="objectSpanMethod"
>
<el-table-column type="index" label="序号" align="center" />
<el-table-column
prop="level"
label="参数级别"
show-overflow-tooltip
align="center"
/>
<el-table-column
prop="year"
label="年度"
show-overflow-tooltip
align="center"
/>
<el-table-column
prop="type"
label="评价类型"
show-overflow-tooltip
align="center"
/>
<el-table-column
prop="way"
label="定额方式"
show-overflow-tooltip
align="center"
/>
<el-table-column
prop="creator"
label="创建人"
show-overflow-tooltip
align="center"
/>
<el-table-column label="创建时间" show-overflow-tooltip align="center">
<template #default="{ row }">{{
dateFormat(row.createTime, 'yyyy-MM-dd')
}}</template>
</el-table-column>
</el-table>
实现方法
interface ObjInterface {
[key: string]: any;
}
export function tableRowMerge(
data: ObjInterface[],
rowName: string,
otherRowName?: string
) {
const idArray = [] as number[];
let idPos = 0;
for (let i = 0; i < data.length; i++) {
if (i == 0) {
idArray.push(1);
idPos = 0;
}
else {
if (otherRowName) {
if (
data[i][rowName] == data[i - 1][rowName] &&
data[i][otherRowName] == data[i - 1][otherRowName]
) {
idArray[idPos] += 1;
idArray.push(0);
}
else {
idArray.push(1);
idPos = i;
}
} else {
if (data[i][rowName] == data[i - 1][rowName]) {
idArray[idPos] += 1;
idArray.push(0);
}
else {
idArray.push(1);
idPos = i;
}
}
}
}
return idArray;
}
调用方法
let rowMergeArr = [] as number[];
let rowMergeArr1 = [] as number[];
interface SpanMethodProps {
row: PriceTableItem;
column: TableColumnCtx<PriceTableItem>;
rowIndex: number;
columnIndex: number;
}
const objectSpanMethod = ({
row,
column,
rowIndex,
columnIndex
}: SpanMethodProps) => {
if (columnIndex === 1) {
const rowSpan = rowMergeArr[rowIndex];
const colSpan = rowSpan > 0 ? 1 : 0;
return {
rowspan: rowSpan,
colspan: colSpan
};
}
if (columnIndex === 3) {
const rowSpan = rowMergeArr1[rowIndex];
const colSpan = rowSpan > 0 ? 1 : 0;
return {
rowspan: rowSpan,
colspan: colSpan
};
}
};
onMounted(() => {
rowMergeArr = tableRowMerge(state.tableDataList, 'level');
rowMergeArr1 = tableRowMerge(state.tableDataList, 'level', 'type');
});