hospital-project/src/components/rankTable/draw.vue

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="排名" width="80" fixed>
      <template #default="scope">
        <div v-if="scope.$index > 2" class="diamond">
          {{ scope.row.ranking }}
        </div>
        <div v-else class="text-center">
          <img :src="RANK_IMG[scope.row.ranking - 1]" alt="" />
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="deptName" :label="deptName" fixed width="150" />
    <el-table-column
      v-if="name"
      prop="assessmentObjectName"
      :label="name"
      fixed
      width="100"
    />
    <div v-for="(item, index) in tableData.dimensionList" :key="index">
      <el-table-column :label="`${item.dimName}(${item.soreRate}%)`">
        <el-table-column
          v-for="(it, id) in item.quotaList"
          :key="id"
          :prop="it.quotaScore"
          :label="`${it.quotaName}(${it.quotaWeight}%)`"
          width="140"
        />
      </el-table-column>
      <el-table-column :prop="item.totalSore" label="总分`" />
    </div>
    <el-table-column prop="allScore" label="总得分" fixed width="150" />
  </el-table>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import rank1 from "@/assets/rank/rank1.png";
import rank2 from "@/assets/rank/rank2.png";
import rank3 from "@/assets/rank/rank3.png";
const RANK_IMG = [rank1, rank2, rank3];
const tableData = ref([]);
const deptName = ref("");
const name = ref("");
const init = (item, deptNames, names) => {
  tableData.value = item;
  deptName.value = deptNames;
  name.value = names;
};
defineExpose({
  init
});
</script>

<style lang="scss" scoped>
.diamond {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px; /* 菱形宽度 */
  height: 25px; /* 菱形高度 */
  padding-top: 1px;
  margin: auto;
  clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  ); /* 定义六边形的形状 */

  font-size: 12px;
  color: white;
  background-color: #d3e8f0; /* 背景颜色 */
}
</style>