原生table表格设置

<table
      width="100%"
      border="1"
      cellspacing="0"
      cellpadding="0"
      id="exportExcel"
    >
      <thead>
        <tr class="tac" style="margin-bottom:10px;font-size: 22px">
          <th colspan="11">租赁物列表</th>
        </tr>
        <tr>
          <th>日期（租赁时间-归还时间）</th>
          <th>分类</th>
          <th>已租数量</th>
          <th>归还数量</th>
          <th>损坏数量</th>
          <th>丢失数量</th>
          <th>超时数量</th>
          <th>租赁时长</th>
          <th>赔偿金</th>
          <th>单价</th>
          <th>合计</th>
        </tr>
      </thead>
      <tbody colspan="11">
        <tr v-for="(item,index) in tableData" :key="index">
            <td>{{item.RealUnitPrice}}</td>
            <td>{{item.Deposit}}</td>
            <td>{{item.RealUnitPrice}}</td>
            <td>{{item.Deposit}}</td>
            <td>{{item.RealUnitPrice}}</td>
            <td>{{item.Deposit}}</td>
            <td>{{item.RealUnitPrice}}</td>
            <td>{{item.Deposit}}</td>
            <td>{{item.RealUnitPrice}}</td>
            <td>{{item.Deposit}}</td>
            <td>{{item.RealUnitPrice}}</td>
            <td>{{item.Deposit}}</td>
        </tr>
      </tbody>
    </table>

先定义表格头部，thead，tr表示行，colspan合并列，则表头合并了11列，表头的合并数，和你展示的列数保持一致。tbody表示表格内容，td每个单元格的值。tr循环数据td进行展示。

效果如下：

原生设计复杂表格的时候，可以使用template，代码如下：

    <table
      width="100%"
      border="1"
      cellspacing="0"
      cellpadding="0"
      id="exportExcel"
      v-show="!show"
    >
      <thead>
        <tr class="tac" style="margin-bottom:10px;font-size: 22px">
          <th colspan="6">线上部分</th>
          <th colspan="6">线下部分</th>
        </tr>
      </thead>
      <tr>
        <!-- 线上 -->
        <th style="width: 25%;" colspan="3">
          <table width="100%" border="1" cellspacing="0" cellpadding="0">
            <tr class="fwb" style="background-color:rgb(207, 215, 231) ;">
              <th colspan="8">营业收入</th>
            </tr>
            <tr class="fwb" style="background-color:rgb(220, 216, 216) ;">
              <th colspan="4">票种</th>
              <th colspan="2">{{ $t(`thead.amount`) }}</th>
              <th colspan="2">订单数</th>
            </tr>
            <template v-for="item in UpProductStatistics">
              <tr
                v-if="
                  item.ItemName == '营业收入' || item.ItemName == '收款总计'
                "
                v-bind:key="item.Sort"
                style="background-color: rgb(242, 216, 137)"
              >
                <td colspan="4">
                  {{ item.ItemName }}
                </td>
                <!-- <td colspan="2">{{item.ItemCode}}</td> -->
                <td colspan="2" style="text-align:right">
                  {{ item.AmountStr }} <span style="display: none;">,</span>
                </td>
                <td colspan="2">{{ item.Count }}</td>
              </tr>

              <tr v-bind:key="item.ItemName" v-else>
                <td colspan="4">{{ item.ItemName }}</td>
                <!-- <td colspan="2">{{item.ItemCode}}</td> -->
                <td colspan="2" style="text-align:right">
                  {{ item.AmountStr }} <span style="display: none;">,</span>
                </td>
                <td colspan="2">{{ item.Count }}</td>
              </tr>
              <tr
                v-if="item.ItemName == '营业收入'"
                v-bind:key="item.Sort"
                style="background-color: rgb(207, 215, 231);"
              >
                <td colspan="8">
                  押金统计
                </td>
              </tr>
            </template>
          </table>
        </th>
        <th style="width: 25%;" colspan="3">
          <table width="100%" border="1" cellspacing="0" cellpadding="0">
            <tr class="fwb" style="background-color:rgb(207, 215, 231) ;">
              <th colspan="6">收款统计</th>
            </tr>
            <tr class="fwb" style="background-color: rgb(220, 216, 216) ;">
              <th colspan="4">支付方式</th>
              <th colspan="2">{{ $t(`thead.amount`) }}</th>
            </tr>
            <template v-for="item in UpPayTypeStatistics">
              <tr
                v-if="item.PayTypeName == '收款总计'"
                v-bind:key="item.PayTypeName"
                style="background-color: rgb(242, 216, 137)"
              >
                <td colspan="4">{{ item.PayTypeName }}</td>
                <td colspan="2" style="text-align:right">
                  {{ item.AmountStr }} <span style="display: none;">,</span>
                </td>
              </tr>
              <tr v-bind:key="item.PayTypeName" v-else>
                <td colspan="4">{{ item.PayTypeName }}</td>
                <td colspan="2" style="text-align:right">
                  {{ item.AmountStr }} <span style="display: none;">,</span>
                </td>
              </tr>
            </template>
          </table>
        </th>
        <!-- 线下 -->
        <th style="width: 25%;" colspan="3">
          <table width="100%" border="1" cellspacing="0" cellpadding="0">
            <tr class="fwb" style="background-color:rgb(207, 215, 231) ;">
              <th colspan="8">营业收入</th>
            </tr>
            <tr class="fwb" style="background-color:rgb(220, 216, 216) ;">
              <th colspan="4">票种</th>
              <th colspan="2">{{ $t(`thead.amount`) }}</th>
              <th colspan="2">订单数</th>
            </tr>
            <template v-for="item in DownProductStatistics">
              <tr
                v-if="
                  item.ItemName == '营业收入' || item.ItemName == '收款总计'
                "
                v-bind:key="item.Sort"
                style="background-color: rgb(242, 216, 137)"
              >
                <td colspan="4">
                  {{ item.ItemName }}
                </td>
                <!-- <td colspan="2">{{item.ItemCode}}</td> -->
                <td colspan="2" style="text-align:right">
                  {{ item.AmountStr }} <span style="display: none;">,</span>
                </td>
                <td colspan="2">{{ item.Count }}</td>
              </tr>

              <tr v-bind:key="item.ItemName" v-else>
                <td colspan="4">{{ item.ItemName }}</td>
                <!-- <td colspan="2">{{item.ItemCode}}</td> -->
                <td colspan="2" style="text-align:right">
                  {{ item.AmountStr }} <span style="display: none;">,</span>
                </td>
                <td colspan="2">{{ item.Count }}</td>
              </tr>
              <tr
                v-if="item.ItemName == '营业收入'"
                v-bind:key="item.Sort"
                style="background-color: rgb(207, 215, 231);"
              >
                <td colspan="8">
                  押金统计
                </td>
              </tr>
            </template>
          </table>
        </th>
        <th style="width: 25%;" colspan="3">
          <table width="100%" border="1" cellspacing="0" cellpadding="0">
            <tr class="fwb" style="background-color:rgb(207, 215, 231) ;">
              <th colspan="6">收款统计</th>
            </tr>
            <tr class="fwb" style="background-color: rgb(220, 216, 216) ;">
              <th colspan="4">支付方式</th>
              <th colspan="2">{{ $t(`thead.amount`) }}</th>
            </tr>
            <template v-for="item in DownPayTypeStatistics">
              <tr
                v-if="item.PayTypeName == '收款总计'"
                v-bind:key="item.PayTypeName"
                style="background-color: rgb(242, 216, 137)"
              >
                <td colspan="4">{{ item.PayTypeName }}</td>
                <td colspan="2" style="text-align:right">
                  {{ item.AmountStr }} <span style="display: none;">,</span>
                </td>
              </tr>
              <tr v-bind:key="item.PayTypeName" v-else>
                <td colspan="4">{{ item.PayTypeName }}</td>
                <td colspan="2" style="text-align:right">
                  {{ item.AmountStr }} <span style="display: none;">,</span>
                </td>
              </tr>
            </template>
          </table>
        </th>
      </tr>
    </table>

展示效果如下：