滚动表格封装

滚动表格封装

1. 我们先设定接收的参数
   需要表头内容columns，表格数据data，需要currentSlides来控制当前页展示几行

const props = defineProps({// 表头内容columns: {type: Array,default: () => [],required: true,},// 表格数据data: {type: Array,default: () => [],},// 当前一页显示几行，超过几行开始滚动currentSlides: {type: Number,default: 5}
});

2. 写好表格基本样式（这个不通用，可根据需求自行调整）
3. 表格通常会有操作列，那么我们通过slot来实现，传递当前行的数据item，提供给点击事件

<slot v-if="props.columns[index].slot" :name="props.columns[index].name" :item="item"  />

4. 封转滚动文字组件，文字超出则滚动显示
   详情可参考另一篇文章戳这里

<HorseRaceLamp:width="props.columns[index].width"font="14px AppleSystemUIFont":text="item[val]":speed="((item[val] && item[val].length) ? item[val].length : 1) * 0.5"
/>

表格完整代码如下：

<template><div class="table"><div class="row thead"><div v-for="item in props.columns" :key="item.name" :style="{ width: `${item.width}px` }">{{ item.label }}</div></div><div class="tbody"><Swiper :modules="modules" :autoplay="swiperOption.autoplay" direction="vertical" :slides-per-view="currentSlides" :space-between="11"><SwiperSlide v-for="(item, ind) in props.data" :key="ind" class="row"><template v-for="(val, index) in columnKeys"><slot v-if="props.columns[index].slot" :name="props.columns[index].name" :item="item"  /><div :title="item[val]" v-else :key="`${index}${val}`" :style="{ width: `${props.columns[index].width}px` }"><HorseRaceLamp:width="props.columns[index].width"font="14px AppleSystemUIFont":text="item[val]":speed="((item[val] && item[val].length) ? item[val].length : 1) * 0.5"/></div></template></SwiperSlide></Swiper></div></div>
</template><script setup>
import { ref, reactive } from 'vue';
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay } from "swiper";
import "swiper/css";
import HorseRaceLamp from '@/components/HorseRaceLamp.vue';const modules = [Autoplay];
const swiperOption = reactive({autoplay: {delay: 3000,disableOnInteraction: false,pauseOnMouseEnter: true,},
});const props = defineProps({// 表头内容columns: {type: Array,default: () => [],required: true,},// 表格数据data: {type: Array,default: () => [],},// 当前一页显示几行，超过几行开始滚动currentSlides: {type: Number,default: 5}
});
const columnKeys = ref([]);columnKeys.value = props.columns.map((item) => item.name);
</script><style lang="scss" scoped>
.table {width: 100%;height: 100%;color: #fff;font-size: 14PX;font-family: AppleSystemUIFont;.thead {background-color: rgb(21 77 160 / 20%);&.row {color: rgba(212, 237, 253, 1);font-size: 12PX;}}.row {display: flex;align-items: center;height: 28PX;padding: 0 30PX;> div {overflow: hidden;width: 100%;margin-right: 10PX;text-align: center;text-overflow: ellipsis;white-space: nowrap;&:nth-last-of-type(1) {margin-right: 0;}}}.swiper {width: 100%;height: 100%;}.tbody {box-sizing: border-box;width: 100%;height: calc(100% - 28PX);padding-top: 11PX;.row {position: relative;display: flex;align-items: center;cursor: pointer;}}
}
</style>

使用方式：

• 需要给Table组件包裹一个父元素，自定义设置其宽高

<div class="content"><Table :columns="columns" :data="tableData" :currentSlides="6"><template #handler="{ item }"><div class="btn" @click="close(item)">关闭</div></template></Table></div>

// 需要传递的参数
const tableData = ref([])
const columns = [{ name: 'redRank', label: '红榜', width: 148 },{ name: 'blackRank', label: '黑榜', width: 148 },{ name: 'handler', label: '操作', slot: true },
];
// 自定义slot插槽操作事件
const close = (item) => {console.log(item)
}

• 设置其宽高

.content {width: 446px;height: 250px;
}