一、购物车表格设计

      <div class="chosetype">
        <table>
          <thead>
            <tr>
              <th width="29%">商品</th>
              <th width="31%">订单详情</th>
              <th width="13%">收货人</th>
              <th>金额</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="orders">
        <table
          class="order-item"
          v-for="item in orderInfo.records"
          :key="item.id"
        >
          <thead>
            <tr>
              <th colspan="5">
                <span class="ordertitle"
                  >{{ item.createTime }}&nbsp;&nbsp;订单编号{{
                    item.outTradeNo
                  }}
                  <span class="pull-right delete"
                    ><img src="../images/delete.png" /></span
                ></span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item1, index1) in item.orderDetailList"
              :key="item1.skuId"
            >
              <td width="60%">
                <div class="typographic">
                  <el-image
                    :src="item1.imgUrl"
                    :preview-src-list="[item1.imgUrl]"
                    style="width: 100px; height: 100px"
                  ></el-image>
                  <a href="#" class="block-text">{{ item1.skuName }}</a>
                  <span>x{{ item1.skuNum }}</span>
                  <a href="#" class="service">售后申请</a>
                </div>
              </td>
              <td
                :rowspan="item.orderDetailList.length"
                v-show="index1 === 0"
                width="8%"
                class="center"
              >
                {{ item.consignee }}
              </td>
              <td
                :rowspan="item.orderDetailList.length"
                v-show="index1 === 0"
                width="13%"
                class="center"
              >
                <ul class="unstyled">
                  <li>总金额¥{{ item.totalAmount }}</li>
                  <li>在线支付</li>
                </ul>
              </td>
              <td
                :rowspan="item.orderDetailList.length"
                v-show="index1 === 0"
                width="8%"
                class="center"
              >
                <a href="#" class="btn">{{ item.orderStatusName }} </a>
              </td>
              <td
                :rowspan="item.orderDetailList.length"
                v-show="index1 === 0"
                width="13%"
                class="center"
              >
                <ul class="unstyled">
                  <li>
                    <a href="mycomment.html" target="_blank">评价|晒单</a>
                  </li>
                </ul>
              </td>
            </tr>
          </tbody>
        </table>
      </div>