teachcloud-print-web/card/elements/fill-table/ElemFillTable.vue

<template>
  <div class="elem-fill-table">
    <table class="table">
      <tr v-for="rowNo in data.rowCount" :key="rowNo">
        <td v-for="colNo in data.colCount" :key="colNo" :style="tdStyles">
          <div :style="tdContStyles">
            {{ data.content[`${rowNo}_${colNo}`] }}
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "elem-fill-table",
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  computed: {
    tdStyles() {
      return {
        border: `1px ${this.data.lineStyle} #000`,
      };
    },
    tdContStyles() {
      return {
        padding: this.data.padding.map((item) => `${item}px`).join(" "),
        fontSize: this.data.fontSize,
        height: this.data.lineHeight + "px",
      };
    },
  },
  mounted() {},
  methods: {},
};
</script>