表头固定在左侧的表格

 页面效果

全部代码

<template>
  <!--报告对比页面  -->
  <div class="page-container">
    <!-- 注释： -->
    <p>注释：
      <Top style="width: 10px; height: 10px; margin-right: 2px;color:red" />
      表示结果指标过高，
      <Bottom style="width: 10px; height: 10px; margin-right: 2px;color:green" />
      表示结果指标过低
    </p>
    <!-- 表格 -->
    <div class="container-tabel">
      <!-- 表头列 -->
      <ul class="row row-header">
        <li class="cell" v-for=" (itemHeader, i) in data.headerData" :key="i">
          <span class="cell-content">{{ itemHeader }}</span>
        </li>
      </ul>
      <!-- 表格数据 -->
      <ul class="row row-data" v-for="(itemRow, i) in data.physicalData" :key="i">
            //按照表头循环
        <li class="cell" v-for="(item, num) in  data.headerData " :key="num">
          <!-- 多个单元格渲染 -->
          <p class="cell-content-more" v-if="(Object.prototype.toString.call(itemRow[item]) === '[object Object]')">
            <span class="content-tips">
              <span class="tips-word" :title="itemRow[item].itemindexresultvalue">
                {{ itemRow[item].itemindexresultvalue }}
              </span>
            </span>
            <span class="content-tips">
              <span class="tips-word" v-show="itemRow[item].highOrLow == 1">
                <Top style="width: 10px; height: 10px;;color:red" />
              </span>
              <span class="tips-word" v-show="itemRow[item].highOrLow == 2">
                <Bottom style="width: 10px; height: 10px;color:green" />
              </span>
            </span>
            <span class="content-tips">
              <span class="tips-word">
                {{ (itemRow[item].normallowvalue ? itemRow[item].normallowvalue : '') +
          ' ~ ' +
          (itemRow[item].normalhighvalue ? itemRow[item].normalhighvalue : '')
                }}
              </span>
            </span>
            <span class="content-tips">
              <span class="tips-word">{{ itemRow[item].itemindexresultunit }}</span>
            </span>

          </p>
          <!-- 固定单元格渲染 -->
          <p class="cell-content-more" v-else-if="item === '检查项目'">
            <span class="content-tips" v-for="( item, index ) in  ['检查结果', '异常描述', '正常参考值', '单位'] " :key="index">
              <span class="tips-word">{{ item }}</span>
            </span>
          </p>
          <!-- 单个单元格渲染 -->
          <span class="cell-content-one" v-else>
            <span>{{ itemRow[item] }}</span>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Top, Bottom } from '@element-plus/icons-vue'
import { useRoute } from "vue-router";
import { getPhysicalContrastList } from '@/api/reportDecode'
import { reactive, onMounted } from 'vue'
const route = useRoute()
const data = reactive({
  cardIds: route?.query?.cardIds || '',
  physicalData: [] as any,
  headerData: [] as any,
})
onMounted(() => {
  initData()
})
const initData = async () => {
  let res: any = await getPhysicalContrastList({ cardIds: data.cardIds })
  if (res && res.data.code === "200") {
    data.headerData = res.data.data?.tittles || []
    data.physicalData = res.data.data?.allCheckMap || []
  }
}
</script>
<style scoped lang="scss">
.page-container {
  background: white;
  padding: 20px;
  overflow: auto;

  .container-tabel {
    display: flex;
    margin-top: 20px;

    .row {
      line-height: 26px;
      border-right: 1px solid #ccc;
      border-top: 1px solid #ccc;
    }

    .row-header {
      border-left: 1px solid #ccc;
    }

    .row-data {
      width: 550px;
    }

    .cell {
      box-sizing: border-box;
      text-align: center;
      border-bottom: 1px solid #ccc;
      padding: 10px;
      height: 47px;

      .cell-content-one {
        text-align: center;
      }

      .cell-content {
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .content-tips {
        display: inline-block;
        width: 25%;
        border-right: 1px solid #ccc;
        overflow: hidden;
        text-overflow: ellipsis;

        &:last-child {
          border: none;
        }

        .tips-word {

          padding: 10px;
          white-space: nowrap;


        }
      }
    }
  }
}
</style>