48 lines
1.3 KiB
Vue
48 lines
1.3 KiB
Vue
<template>
|
|
<table class="aa-mergetable">
|
|
<thead>
|
|
<tr><th v-for="c in columns" :key="c.key">{{ c.title }}</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(row, idx) in merged" :key="idx">
|
|
<template v-for="c in columns" :key="c.key">
|
|
<td
|
|
v-if="!c.merge || row._first[c.key]"
|
|
:class="{ 'aa-merged': c.merge && row._first[c.key] }"
|
|
:rowspan="c.merge && row._first[c.key] ? row._span[c.key] : undefined"
|
|
>{{ row[c.key] }}</td>
|
|
</template>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
data: { type: Array, default: () => [] },
|
|
columns: { type: Array, default: () => [] }
|
|
});
|
|
|
|
const merged = computed(() => {
|
|
const result = props.data.map((row) => ({ ...row, _first: {}, _span: {} }));
|
|
props.columns.filter((c) => c.merge).forEach((c) => {
|
|
let i = 0;
|
|
while (i < result.length) {
|
|
let j = i;
|
|
while (j + 1 < result.length && result[j + 1][c.key] === result[i][c.key]) j++;
|
|
const span = j - i + 1;
|
|
for (let k = i; k <= j; k++) {
|
|
result[k]._first[c.key] = k === i;
|
|
result[k]._span[c.key] = span;
|
|
}
|
|
i = j + 1;
|
|
}
|
|
});
|
|
return result;
|
|
});
|
|
</script>
|
|
|
|
<style src="./MergedCellTable.css"></style>
|