pc_shop_site/components/table/MailTable.vue

<template>
  <div>
    <table
      border="1"
      style="
        border-collapse: collapse;
        font-size: 14px;
        table-layout: fixed;
        width: 100%;
        min-width: 800px;
      "
      bordercolor="#000">
      <tbody>
        <tr
          v-for="(items, key, i) in mailData"
          :key="key">
          <td
            style="
              padding: 18px 0;
              width: 40%;
              text-align: center;
              color: #000;
            "
            :style="(i == 1 || i == 10) && objStyle">
            {{ key }}
          </td>
          <td style="padding: 18px 10px">
            <div v-if="typeof items == 'string'">
              <a
                v-if="items.indexOf('@') != -1 || items.indexOf('http') != -1"
                :href="items"
                style="color: #6495ed; text-decoration: none"
                ><span>{{ items }}</span></a
              >
              <span v-else>{{ items }}</span>
            </div>
            <template v-else>
              <div
                v-if="$utils.checkType(items) == 'Object'"
                style="
                  width: 100%;
                  display: flex;
                  justify-content: space-between;
                ">
                <div
                  v-for="(item, i) in items"
                  :key="i"
                  style="text-align: left; width: 100%">
                  <span v-if="key == 'QTY'">{{ item }}</span>
                  <span v-else>${{ item }}</span>
                </div>
              </div>
              <div
                v-for="(item, i) in items"
                :key="i"
                style="line-height: 20px"
                v-else>
                <span>{{ item }}</span>
              </div>
            </template>
          </td>
        </tr>
        <tr>
          <td colspan="2" style="padding: 20px">
            <slot></slot>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    mailData: {},
    buyData: {},
  },
  data() {
    return {
      objStyle: {
        fontWeight: 'bold',
        backgroundColor: '#efefef',
      },
    }
  },
}
</script>

<style lang="scss" scoped>
</style>