57 lines
1.5 KiB
Vue
57 lines
1.5 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">
|
|
<td
|
|
v-for="c in columns"
|
|
:key="c.key"
|
|
:class="{ 'aa-merged': c.merge && row._first[c.key] }"
|
|
:rowspan="c.merge && row._first[c.key] ? row._span[c.key] : undefined"
|
|
v-if="!c.merge || row._first[c.key]"
|
|
>{{ row[c.key] }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AaMergedCellTable',
|
|
props: {
|
|
data: { type: Array, default: () => [] },
|
|
columns: { type: Array, default: () => [] }
|
|
},
|
|
computed: {
|
|
merged() {
|
|
var spans = {};
|
|
var first = {};
|
|
var result = this.data.map(function (row) {
|
|
var copy = Object.assign({}, row);
|
|
copy._first = {};
|
|
copy._span = {};
|
|
return copy;
|
|
});
|
|
this.columns.filter(function (c) { return c.merge; }).forEach(function (c) {
|
|
var i = 0;
|
|
while (i < result.length) {
|
|
var j = i;
|
|
while (j + 1 < result.length && result[j + 1][c.key] === result[i][c.key]) j++;
|
|
var span = j - i + 1;
|
|
for (var 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>
|