board-summay-sheet/src/components/boardOrderDetails.vue

<template>

  <div id='order-details'>

    <!--
      <div class='main_title '>
      <h1>板材明细单</h1>
    </div>
    <div class='sub-title'>
      <div class='header-detail' v-for="(info,index) in orderInfos " :key="index">
        <b>{{info}}:</b>{{orderDetails[Object.keys(orderDetails)[index]]}}</div>
    </div>
    -->
    <template v-for="(board,index) in orderDetails.boards">
      <Table :board="board" :key='index' :ifRenderIndex="index"></Table>
    </template>

  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Data from '../assets/data';
import Table from './table.vue';

const orderInfosFormat: string[] = [
  '订单号',
  '客户名称',
  '销售日期',
  '联系人',
  '联系电话',
  '送货地址',
  '备注',
];
const tableTitleFormat: string[] = [
  '房名',
  '柜名',
  '板编号',
  '板名称',
  '开料长',
  '开料宽',
  '厚度',
  '数量',
  '面积',
  '异形',
  '造型',
  '左/右/上/下',
  '纹路',
  '备注',
];

export default Vue.extend({
  components: {
    Table,
  },
  data() {
    return {
      orderDetails: Data,
      orderInfos: orderInfosFormat,
      tableTitle: tableTitleFormat,
    };
  },
});
</script>
<style lang="scss" scoped>
#order-details {
  width: 100%;
  margin: 0 auto;
  .main_title {
    text-align: center;
  }

  .sub-title {
    display: flex;
    flex-wrap: wrap;
    .header-detail {
      margin-bottom: 10px;
      width: 33%;
    }
  }
}
.total_summary {
  text-align: right;
}
table {
  width: 100%;
}
</style>