<template>
  <div>
    <table class="custom-table">
      <thead>
      <tr>
        <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(row, index) in tableData" :key="index">
        <td>{{ row.status }}</td>
        <td>{{ row.time }}</td>
        <td>{{ row.description }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "ReceiptInfoTable",
  data() {
    return {
      headers: ["回执状态", "状态时间", "回执描述"],
      tableData: [
        {
          status: "山东电子口岸已上传",
          time: "2024-11-08 15:31:58",
          description: "订单变更申请报关单【f291cda6-f664-4bf5-8edc-bcc012f8775】单证不存在，不可报单申报，报文业务主键【24HX-11-40-3722960DYB】"
        },
        {
          status: "山东电子口岸已上传",
          time: "2024-11-08 15:31:58",
          description: "山东电子口岸已上传"
        },
        {
          status: "山东电子口岸已保存",
          time: "2024-11-08 15:30:45",
          description: "山东电子口岸已保存，加签后上传"
        }
      ]
    };
  }
};
</script>

<style scoped lang="scss">
.custom-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
  background-color: white;
}

.custom-table th, .custom-table td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
  word-wrap: break-word;
}

.custom-table thead {
  background-color: #f5f5f5;
}

.custom-table th {
  font-weight: bold;
}

.custom-table tr:nth-child(odd) {
  //background-color: #fafafa;
}
</style>