<template>
<el-table :data="tableData" :span-method="arraySpanMethod" style="width: 100%">
<el-table-column prop="id" label="ID" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<!-- 其他列 -->
</el-table>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const tableData = ref([
{ id: 1, name: 'Alice' },
{ id: 1, name: 'Bob' },
{ id: 2, name: 'Charlie' },
{ id: 2, name: 'David' }
]);
const idMap = new Map(); // 用于存储每个id连续出现的次数和起始行索引
tableData.value.forEach((row, index) => {
if (!idMap.has(row.id)) {
idMap.set(row.id, { count: 1, startIndex: index });
} else {
const { count, startIndex } = idMap.get(row.id);
idMap.set(row.id, { count: count + 1, startIndex });
}
});
const arraySpanMethod = ({ row, column, rowIndex }) => {
if (column.property === 'id') {
const { count, startIndex } = idMap.get(row.id);
if (rowIndex === startIndex) {
return [count, 1]; // 在起始行，跨越count行，1列
} else {
return [0, 0]; // 其他行，不显示（被合并了）
}
} else {
return [1, 1]; // 其他列，正常显示
}
};
return {
tableData,
arraySpanMethod,
};
},
};
</script>
/*
//动态添加行或列 需要 在监听处清空map idMap.clear();
watchEffect(() => {
idMap.clear();
tableData.value = final.value.list;
tableData.value.forEach((row, index) => {
let id = getpropertyId(row)
if (!idMap.has(id)) {
idMap.set(id, { count: 1, startIndex: index });
} else {
const { count, startIndex } = idMap.get(id);
idMap.set(id, { count: count + 1, startIndex });
}
});
})
*/