无限滚动表格

纵向无限滚动
单元格内部横向滚动
在这里插入图片描述

<!--* @Description: 横向、纵向滚动表格* @Author: liyanfeng liyanfeng@hopewind.com* @Date: 2024-06-15 16:06:57* @LastEditors: liyanfeng liyanfeng@hopewind.com* @LastEditTime: 2024-06-20 17:15:37* @FilePath: \plus-ui\src\components\ScrollTable\index.vue* Copyright 2024 Shenzhen Hopewind Electric Co., Ltd, All RightsReserved. 
-->
<template><div class="scroll-table"><div class="scroll-table-header"><divv-for="item in header":key="item.props"class="scroll-table-header-item":style="{ width: item.width }">{{ item.name }}</div></div><div class="scroll-table-body"><div class="scroll-table-body-content" :class="{ bodyScroll }"><div class="content-item" v-for="item in scrollData" :key="item.id"><divclass="content-cell"v-scrollv-for="col in header":key="col.props":style="{ width: col.width }"><div class="content-scroll"><template v-if="col.slot"><slot :name="col.slot" :scope="item"></slot></template><template v-else>{{ item[col.props] || '--' }}</template></div></div></div></div></div></div>
</template>
<script setup lang="ts">import type { Header } from './types';interface Props {header: Header[];data: any;bodyScroll?: boolean; // 是否纵向滚动height?: number; // 高度listNum?: number; // 每页数据量}const prop = defineProps<Props>();const scrollData = computed(() => {return prop.data.concat(prop.data.slice(0, prop.listNum || 7));});const vScroll = {mounted: (el: HTMLElement) => {if (el.scrollWidth !== el.clientWidth) {el.classList.add('content-scroll-father');}},};// 纵向滚动距离const scrollHeight = computed(() => {return ((prop.height || 280) / 1080) * 100 + 'vh';});
</script><style lang="scss" scoped>.scroll-table {width: 100%;height: 100%;color: #fff;}.scroll-table-header {display: flex;align-items: center;justify-content: space-between;background: rgba(255, 255, 255, 0.1);font-size: vw(16);color: #a8bfcf;height: vh(40);&-item {text-align: center;}}.scroll-table-body {width: 100%;height: calc(100% - vh(40));font-size: vw(14);overflow: hidden;}.scroll-table-body-content {width: 100%;}.bodyScroll {animation: bodyScroll 20s linear infinite;&:hover {animation-play-state: paused;}}@keyframes bodyScroll {0% {transform: translateY(0);}100% {transform: translateY(calc(-100% + v-bind(scrollHeight))); // 向上偏移自身高度的100% 再减去首屏高度}}.content-item {display: flex;align-items: center;justify-content: space-between;height: vh(40);line-height: vh(40);color: '#A8BFCF';.content-cell {white-space: nowrap;overflow: hidden;text-align: center;}.content-scroll-father .content-scroll {width: max-content;animation: cellScroll 5s linear infinite;}&:nth-child(even) {background: rgba(255, 255, 255, 0.1);}}@keyframes cellScroll {0% {transform: translateX(0);}100% {transform: translateX(-100%); // 向左偏移自身宽度}}
</style>