nuxtProject/components/common/mtaTable.vue

<template>
  <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  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 scoped>
.shikan {
  cursor: pointer;
}
</style>