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

<template>
  <el-table
    :data="tableData"
    class="mytTable"
    style="width: 100%"
    :span-method="arraySpanMethod"
  >
    <el-table-column
      type="index"
      label="排名"
      width="80"
      fixed
      header-row-style="background-color: #F5F7FA;"
    >
      <template #default="scope">
        <div
          v-if="scope.$index === 0"
          class="text-center text-sm font-extrabold text-[#000000]"
        >
          平均分
        </div>
        <div v-if="scope.$index > 3" class="diamond">
          {{ scope.$index + 1 }}
        </div>
        <div v-if="scope.$index > 0" class="text-center">
          <img :src="RANK_IMG[scope.$index - 1]" alt="" />
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="科室" fixed width="150" />
    <el-table-column prop="date" label="姓名" fixed width="100" />
    <el-table-column label="数量(5%)">
      <el-table-column prop="state" label="出院人次(5%)" width="140" sortable />
      <el-table-column prop="city" label="手术人次(15%)" width="140" />
    </el-table-column>
    <el-table-column
      prop="date"
      label="总分"
      width="100"
      sortable
      :header-cell-style="{ backgroundColor: '#CCEEE2' }"
    />
    <el-table-column label="效率(5%)">
      <el-table-column prop="state" label="平均住院日(5%)" width="150" />
      <el-table-column prop="city" label="药品耗材比(5%)" width="150" />
    </el-table-column>
    <el-table-column prop="date" label="总分" width="100" />
    <el-table-column label="质量(5%)">
      <el-table-column prop="state" label="手术并发症发生率" width="150" />
    </el-table-column>
    <el-table-column prop="date" label="总分" width="100" />
    <el-table-column label="难度(5%)">
      <el-table-column prop="state" label="微创手术人次(5%)" width="150" />
      <el-table-column prop="state" label="CMT值(5%)" width="100" />
      <el-table-column prop="state" label="RW>2占比(5%)" width="130" />
      <el-table-column prop="state" label="主刀四类手术(5%)" width="150" />
      <el-table-column prop="state" label="主刀微创手术(5%)" width="150" />
    </el-table-column>
    <el-table-column prop="date" label="总分" width="100" />
    <el-table-column label="强度(5%)">
      <el-table-column prop="state" label="夜班数(10%)" width="150" />
    </el-table-column>
    <el-table-column prop="date" label="总分" width="100" />
    <el-table-column label="教学(5%)">
      <el-table-column
        prop="state"
        label="手术一助指导下医生(5%)"
        width="200"
      />
      <el-table-column prop="date" label="教学积分(5%)" width="100" />
    </el-table-column>
    <el-table-column prop="date" label="总分" width="100" />
    <el-table-column label="科研(5%)">
      <el-table-column prop="state" label="科研积分(10%)" width="150" />
    </el-table-column>
    <el-table-column prop="date" label="总分" width="100" />
    <el-table-column prop="date" label="总得分" width="100" />
  </el-table>
</template>

<script lang="ts" setup>
import { computed, reactive } 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 = reactive([
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  }
]);
const tableHeaderColor = ({ row, column, rowIndex, columnIndex }) => {
  // console.log("row", row);
  // console.log("column", column);
  // console.log("rowIndex", rowIndex);
  // console.log("columnIndex", columnIndex);
  // return "background:	#F5F5F5; color:#000000;";
  return "aaaa";
};
const averageData = () => {
  tableData.unshift({
    date: "",
    name: "",
    state: "",
    city: "",
    address: "",
    zip: ""
  });
};
averageData();
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // 合并第一行的“排名”、“科室”和“姓名”
  if (rowIndex === 0) {
    if (columnIndex === 0) {
      return [1, 3]; // “排名”合并三列
    } else if (columnIndex === 1) {
      return [0, 0]; // “科室”不显示
    } else if (columnIndex === 2) {
      return [0, 0]; // “姓名”不显示
    }
  }
  return [1, 1]; // 其他单元格正常显示
};
</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; /* 背景颜色 */
}

.mytTable ::v-deep .el-table th.el-table__cell,
::v-deep .el-table th,
::v-deep .el-table tr {
  color: white;
  background-color: transparent !important;
}

.aaaa {
  background-color: black !important;
}
</style>