滚动表格封装

滚动表格封装

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;
}