nuxtProject/components/common/mtaTable.vue

<template>
  <table class="mta-table">
    <thead>
      <tr>
        <th v-for="item in config" :key="item.key">{{item.label}}</th>
      </tr>
    </thead>
    <tbody>
    <tr v-for="(itemTd,index) in data" :key="index">
      <td v-for="item in config" :key="item.key">
        <template v-if="item.key === 'name'">
          <span>
            {{itemTd[item.key]}}
            <i class="table-shikan mta-hidden-xs" v-if="itemTd['shikanUrl']" @click="shikan(itemTd['shikanUrl'])">试看</i>
          </span>
        </template>
        <template v-else>
          <span>{{itemTd[item.key]}}</span>
        </template>
      </td>
    </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: "mtaTable",
  props: {
    data: {
      type: Array,
      default: () => ([])
    },
    config: {
      type: Array,
      default: () => ([])
    }
  },
  methods: {
    shikan(url) {
      this.$emit('shi-kan', {url})
    }
  }
}
</script>

<style lang="scss" scoped>
.table-shikan {
  cursor: pointer;
  color: #00b96b;
  font-size: 14px;
  font-weight: 500;
  margin-left: 20px;
}
.mta-table {
  width: 100%;
  border: 1px solid #E8E8E8;
  border-collapse: collapse;

  td {
    font-size: 14px;
    font-weight: 500;
    color: #565656;
    line-height: 60px;
    padding: 5px 20px;
    border: 1px solid #E8E8E8;
  }

  th {
    padding: 5px 20px;
    color: #565656;
    line-height: 60px;
    font-size: 14px;
    border: 1px solid #E8E8E8;
  }
}

@media (max-width: 768px) {
  .mta-table {
    td {
      line-height: 14px;
      padding: 5px 5px ;
      font-size: 12px;
      display: inline-block;
      box-sizing: border-box;
      span {
        display: inline-block;
        width: 100%;
        text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;white-space: nowrap;word-break: break-all;
      }
      &:first-child {
        width: 60%;
      }
      &:nth-child(2) {
        width: 20%;
      }
      &:last-child {
        width: 20%;
      }
    }
    th {
      line-height: 14px;
      padding: 5px 5px;
      font-size: 12px;
      display: inline-block;
      box-sizing: border-box;
      &:first-child {
        width: 60%;
      }
      &:nth-child(2) {
        width: 20%;
      }
      &:last-child {
        width: 20%;
      }
    }

  }
}
</style>