export const columns: BasicColumn[] = [
{
title: '用途層級(jí)1',
align: 'center',
width: 100,
dataIndex: 'useLevel1',
customCell: (record, index, column) => {
return { rowSpan: record.useLevel1Rowspan ?? 1 };
},
},
{
title: '用途層級(jí)2',
align: 'center',
width: 100,
dataIndex: 'useLevel2',
customCell: (record, index, column) => {
return { rowSpan: record.useLevel2Rowspan ?? 1 };
},
},
{
title: '用途層級(jí)3',
align: 'center',
width: 100,
dataIndex: 'useLevel3',
customCell: (record, index, column) => {
return { rowSpan: record.useLevel3Rowspan ?? 1 };
},
},
{
title: '用途層級(jí)4',
align: 'center',
width: 100,
dataIndex: 'useLevel4',
customCell: (record, index, column) => {
return { rowSpan: record.useLevel4Rowspan ?? 1 };
},
},
{
title: '能源類別',
align: 'center',
width: 100,
dataIndex: 'energyType',
}
]
import { columns } from './jsfile.data';
let newTableData = reactive([]);
// 是否已經(jīng)合并防止重復(fù)監(jiān)聽(tīng)
let isMerge = ref(false);
// 需要合并的屬性列
const needTomergeColumnsIndex = ['useLevel1', 'useLevel2', 'useLevel3', 'useLevel4'];
// 監(jiān)聽(tīng)表格數(shù)據(jù)
watch(tableDataSource, async (newTableDataSource) => {
if (newTableDataSource && newTableDataSource.length > 1 && !isMerge.value) {
let tableData = newTableDataSource;
isMerge.value = true;
// 遍歷需要合并的屬性列
await needTomergeColumnsIndex.forEach((columnDataIndex) => {
// 存儲(chǔ)結(jié)果和計(jì)算每個(gè)屬性的出現(xiàn)次數(shù)。
const dynamicVariables = {};
// 屬性的Rowspan,分別表示該對(duì)象在需要合并列屬性上的rowspan 值
const variableName = columnDataIndex + 'Rowspan';
// 計(jì)算每個(gè)屬性的 rowspan
tableData.forEach((item, index) => {
dynamicVariables[variableName] = 0;
if (tableData[index - 1] && item[columnDataIndex] === tableData[index - 1][columnDataIndex]) {
dynamicVariables[variableName] = 0;
} else {
for (let i = index; i < tableData.length; i++) {
if (tableData[i][columnDataIndex] === item[columnDataIndex]) {
dynamicVariables[variableName]++;
} else {
break;
}
}
}
item[variableName] = dynamicVariables[variableName];
});
console.log(tableData);
});
// 表格賦具有合并屬性的新值
newTableData = tableData;
}
});