Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready

frameworks/MergedCellTable.vue2.vue

@@ -0,0 +1,56 @@
+<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>