teachcloud-print-web/card/elements/grids/ElemGrids.vue

<template>
  <div :class="classes">
    <table :style="tableStyles">
      <template v-for="(row, rindex) in data.rowCount">
        <tr :key="rindex">
          <td
            v-for="(col, cindex) in data.columnCount"
            :key="cindex"
            :style="styles"
          >
            <div v-if="data.halving" style="paddingBottom: 100%;"></div>
          </td>
        </tr>
        <tr :key="`space-${rindex}`" v-if="data.rowSpace">
          <td :style="rowSpaceStyle" :colspan="data.columnCount"></td>
        </tr>
      </template>
    </table>
  </div>
</template>

<script>
export default {
  name: "elem-grids",
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {};
  },
  computed: {
    classes() {
      return ["elem-grids", { "elem-grids-halving": this.data.halving }];
    },
    styles() {
      let data = {
        borderStyle: this.data.style
      };
      if (!this.data.halving) {
        data.width = this.data.columnSize + "px";
        data.height = this.data.columnSize + "px";
      }
      return data;
    },
    tableStyles() {
      let data = {};
      if (!this.data.halving) {
        data.width = this.data.columnSize * this.data.columnCount + "px";
      }
      return data;
    },
    rowSpaceStyle() {
      return {
        height: this.data.rowSpace + "px",
        borderStyle: this.data.style
      };
    }
  },
  methods: {}
};
</script>