xinkeaboard/xinkeaboard-promotion-portal/src/components/competitor/RankTable.vue

<template>
  <div class="rank-table">
    <div class="rank-table-head">最有价值的关键词排名</div>
    <el-table :data="tableData">
      <el-table-column prop="keyword" align="center" label="关键词"> </el-table-column>
      <el-table-column prop="searchVolume" align="center" label="搜索量">
        <template #default="scope">
          {{ parseNumber(scope.row.searchVolume) }}
        </template>
      </el-table-column>
      <el-table-column prop="monthly" align="center" label="SEO点击次数（变化）">
        <template #default="scope">
          <span v-if="scope.row.monthly > 0" style="color: #036eb8">{{
            '+ ' + parseNumber(scope.row.monthly)
          }}</span>
          <span v-else style="color: red">{{ '- ' + parseNumber(scope.row.monthly) }}</span>
          {{ scope }}
        </template>
      </el-table-column>
      <el-table-column prop="dp" align="center" label="DP（关键词难度）"> </el-table-column>
      <el-table-column prop="cpc" align="center" label="CPC（每次点击费用）">
        <template #default="scope">
          {{ '$ ' + scope.row.cpc }}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="searchVolume" align="center" label="桌面搜索"> </el-table-column> -->
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useMainStore } from '@/store';

const props = defineProps<{
  tableData: any[];
}>();

const mainStore = useMainStore();

const expanded = computed(() => mainStore.getExpanded);
const tableData = expanded.value ? props.tableData : props.tableData.slice(0, 10);

const parseNumber = (num: number) => {
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K';
  }
  return num;
};
// const tableData = ref([
//   {
//     searchVolume: 5400,
//     cpc: 0.16,
//     monthly: 50,
//     keyword: 'popmart.com',
//     quarterly: 50,
//     dp: 92,
//     yearly: 10471
//   },
//   {
//     searchVolume: 70,
//     cpc: 0.96,
//     monthly: 27,
//     keyword: 'pop art usa',
//     quarterly: 27,
//     dp: 6,
//     yearly: 600
//   }
// ]);
</script>

<style lang="scss" scoped>
.rank-table {
  width: 100%;
  min-height: 300px;

  &-head {
    height: 66px;
    padding-left: 30px;
    font-weight: bold;
    font-size: 20px;
    color: #282e30;
    box-sizing: border-box;
  }

  :deep(.el-table) {
    width: 100%;
    height: 317px;

    .el-table__header {
      height: 52px;

      .el-table__cell {
        background: rgba(3, 110, 184, 0.1) !important;
        font-weight: bold;
        font-size: 16px;
        color: #282e30;
      }
    }

    .el-table__row {
      height: 52px;
      font-weight: bold;
      font-size: 14px;
      color: #282e30;
    }
  }
  :deep(.el-table__cell) {
    img {
      width: 22px;
      height: 22px;
      position: relative;
      top: 5px;
    }
  }
}
</style>