aurora-admin/frameworks/MergedCellTable.vue3.vue

<template>
  <table class="kole-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="{ 'kole-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>