pc_shop_site/components/table/StockTable.vue

<template>
  <table>
    <tbody>
      <tr class="title">
        <th rowspan="2">Model</th>
        <th rowspan="2">Available stock</th>
        <th colspan="2">Next shipment</th>
      </tr>
      <tr>
        <th>Date</th>
        <th>QTY</th>
      </tr>
      <template v-if="comData.length">
        <tr v-for="(items, key) in comData" :key="key">
            <!-- point是旧字段, 后续版本可以删掉. -->
            <td>{{ items.sku_model || items.point }}</td>
            <td>{{ items.available_stock }}</td>
            <td>{{ $utils.formatTime(items.next_times, 'DD-MM-YYYY',true) }}</td>
            <td>{{ items.arrival_stock }}</td>
        </tr>
      </template>
      <tr v-else>
        <td rowspan="3" colspan="4">No Data</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: [],
  },
  computed:{
    comData(){
      return this.data.filter(item => item.is_show)
    }
  }
};
</script>

<style lang="scss" scoped>
$deep-blue:#004A97;

table {
  width: 100%;
  font-size: 16px;
  text-align: center;
  overflow: hidden;
  border-right: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-spacing: 0;
  table-layout: fixed;
  margin-bottom: 10px;
  tr {
    height: 32px;
    &:nth-child(1),&:nth-child(2) {
      background-color: $deep-blue;
    }
    th {
      border-left: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      vertical-align: middle;
      color: #fff;
    }
    td {
      border-left: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      vertical-align: middle;
      color: #4a596c;
    }
  }
}
</style>