antd+vue3+js的纵向表格

原生纵向表格：

  <div class="wrap">
    <div class="container">
      <a-table 
        :data-source="dataSource" 
        :columns="columns" 
        :pagination="false"
        :scroll="{ x: width, y: scrolly }"
        rowKey="parms"
        :rowClassName="(_record, index) => (index % 2 === 1 ? 'tdodd' : 'tdeven')"
      >
        <template></template>
      </a-table>
    </div>
  </div>
  <!-- 横向滚动 -->
  <div class="timeDrag">
    
  </div>
</template>
<script setup>
import { defineComponent, ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue';
// import { ewsdata } from './@/api/station/data';
import { useTrendreviewStore } from '/@/store/modules/trendreview';
import { storeToRefs } from 'pinia';

let dataList = [
  {time: '2022-12-20', MEWS: 6, rr: 24,   temp: 36.2, bp: 50, hr: 20, yishi: '对疼痛有反应', spo2: 54, yang: '是', bz: '标准1'},
  {time: '2022-12-20', MEWS: 6, rr: 24,   temp: 36.2, bp: 50, hr: 20, yishi: '对疼痛有反应', spo2: 54, yang: '是', bz: '标准1'},
  {time: '2022-12-20', MEWS: 6, rr: 24,   temp: 36.2, bp: 50, hr: 20, yishi: '对疼痛有反应', spo2: 54, yang: '是', bz: '标准1'},
  {time: '2022-12-20', MEWS: 6, rr: 24,   temp: 36.2, bp: 50, hr: 20, yishi: '对疼痛有反应', spo2: 54, yang: '是', bz: '标准1'},
  {time: '2022-12-20', MEWS: 6, rr: 24,   temp: 36.2, bp: 50, hr: 20, yishi: '对疼痛有反应', spo2: 54, yang: '是', bz: '标准1'},
  {time: '2022-12-20', MEWS: 6, rr: 24,   temp: 36.2, bp: 50, hr: 20, yishi: '对疼痛有反应', spo2: 54, yang: '是', bz: '标准1'}
]
let types = dataList.map(el=>el.type)
// 生成时间title 表头配置
let  columns = [
  { title: '时间', dataIndex: 'parms', align: 'center', width: 100}]
let dataSource = [{
  parms: 'MEWS',
},{
  parms: 'RR(RPM)'
},{
  parms: 'Temp(°C)'
},{
  parms: 'BP-S(mmHg)'
},{
  parms: 'HR(bpm)'
},{
  parms: '意识(ACVPU)'
},{
  parms: 'SpO2(%)'
},{
  parms: '氧供'
},{
  parms: 'SpO2(评分标准)'
}
]
let keyMap = {
  0: 'MEWS',
  1: 'rr',
  2: 'temp',
  3: 'bp',
  4: 'hr',
  5: 'yishi',
  6: 'spo2',
  7: 'yang',
  8: 'bz'
}
const getClassName = (num) => {
  if (num == 0 ) return 'white';
  if (num >= 1 && num <= 3) return 'green';
  if (num >= 4 && num <= 6) return 'yellow';
  if (num >= 7 && num <= 14) return 'red';
  return 'bgcolor'
}
// 构建表头 & 数据源
dataList.forEach((el, i)=>{
  dataSource[0][`${el.time}.MEWS`] = el.MEWS
  dataSource[1][`${el.time}.rr`] = el.rr
  dataSource[2][`${el.time}.temp`] = el.temp
  dataSource[3][`${el.time}.bp`] = el.bp
  dataSource[4][`${el.time}.hr`] = el.hr
  dataSource[5][`${el.time}.yishi`] = el.yishi
  dataSource[6][`${el.time}.spo2`] = el.spo2
  dataSource[7][`${el.time}.yang`] = el.yang
  dataSource[8][`${el.time}.bz`] = el.bz
  columns.push({title: el.time, dataIndex: el.time, align: 'center', customRender: ({ record, index ,column}) => {
    // console.log('record')
    console.log(column)
    let val = dataSource[index][`${column.dataIndex}.${keyMap[index]}`]
    if (index === 0) {
      return ('div', {className: getClassName(val)}, val)
    }
    console.log('index---', index)
    return val
  },});
});
console.log(dataSource, columns);

// 表格出现滚动的宽度和高度
let scrolly = ref(450);
let width = ref(1500);
</script>
<style lang="less" scoped>
.wrap {
  width: 440px;
  height: 100%;
  overflow: auto;
}
.container {
  :deep(.ant-table-wrapper) {
    color: #fff !important;
  }
  /*  改变悬浮表格换色 */
  :deep(.ant-table-tbody) > tr:hover:not(.ant-table-expanded-row) > td, .ant-table-row-hover, .ant-table-row-hover > td {
    background-color: #333232;
  }
  :deep(.tdodd) td {
    background-color: #3d4355;
  }
  :deep(.tdeven) td {
    background-color: #313644;
  }
  :deep(.ant-table-thead > tr > th) {
    background-color: #3d4355;
  }
  :deep(.ant-picker) {
    border-color: rgba(255, 255, 255, 0.46);
  }
}
:deep(.bgcolor) {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	text-align: center;
	line-height: 30px;
	background-color: green;
}
:deep(.green) {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	text-align: center;
	line-height: 30px;
	background-color: green;
}
:deep(.white) {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	text-align: center;
	line-height: 30px;
	background-color: #eeeeee;
}
:deep(.yellow) {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	text-align: center;
	line-height: 30px;
	background-color: yellow;
}
:deep(.red) {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	text-align: center;
	line-height: 30px;
	background-color: red;
}
</style>