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">
          <span> {{ data.content[`${rowNo}_${colNo}`] }}</span>
        </td>
      </tr>
    </table>
  </div>
</template>

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