pc_shop_site/components/table/ChangeTable.vue

<template>
  <div>
    <table v-if="data.length">
      <tbody>
        <tr class="title">
          <th width="25%">Date</th>
          <th width="25%">Change Type</th>
          <th width="50%">Details</th>
        </tr>
        <tr v-for="(items, key) in data" :key="key">
          <td>{{ $utils.formatTime(items.update_time) }}</td>
          <td>{{ items.type_name }}</td>
          <td>{{ items.detail }}</td>
        </tr>
      </tbody>
    </table>
    <div v-else>
      <el-empty description="No Data"></el-empty>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    }
  },
}
</script>

<style lang="scss" scoped>
table {
  width: 100%;
  // border-collapse: collapse;
  font-size: 16px;
  text-align: center;
  overflow: hidden;
  border-right: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-spacing: 0;
  tr {
    height: 40px;
    &:nth-child(1) {
      background-color: #004A97;
    }
    th {
      border-left: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      vertical-align: middle;
      color: #fff;
      // font-family: ProximaNova-Semibold;
    }
    td {
      border-left: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      vertical-align: middle;
      color: #4a596c;
    }
  }
}
</style>