vue使用动画实现滚动表格效果

来源：jb51　　时间：2022/4/11 18:16:19　　对本文有异议

本文实例为大家分享了vue使用动画实现滚动表格效果的具体代码，供大家参考，具体内容如下

需求

在一些大屏项目中，需要使用到表格行数据滚动。本文介绍在vue项目中使用动画实现滚动表格。

vue代码如下

<template>
? <div style="cursor: default;margin:9px 10px 18px">
? ? <div class="table-header table-row">
? ? ? <div class="table-cell" style="width: 25%">计划名称</div>
? ? ? <div class="table-cell" style="width: 40%">核心企业</div>
? ? ? <div class="table-cell" style="width: 15%">发行状态</div>
? ? ? <div class="table-cell" style="width: 20%;text-align:right">金额(元)</div>
? ? </div>
? ? <div class="table-body">
? ? ? <div :class="{ 'scroll-wrap': getPlayData.length > 0 }">
? ? ? ? <div
? ? ? ? ? class="table-row"
? ? ? ? ? :class="{ hasBgc: index % 2 === 0 }"
? ? ? ? ? v-for="(item, index) in getPlayData"
? ? ? ? ? :key="index"
? ? ? ? ? :ref="'row_' + index"
? ? ? ? >
? ? ? ? ? <div class="table-cell" style="width: 25%" :title="item.productName">
? ? ? ? ? ? {{ item.productName }}
? ? ? ? ? </div>
? ? ? ? ? <div class="table-cell" style="width: 40%" :title="item.coreName">{{ item.coreName }}</div>
? ? ? ? ? <div class="table-cell" style="width: 15%" :title="item.publish">{{ item.publish }}</div>
? ? ? ? ? <div class="table-cell" style="width: 20%;text-align:right" :title="item.publishAmount">
? ? ? ? ? ? {{ item.publishAmount }}
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
</template>
<script>
export default {
? props: {
? ? data: {
? ? ? type: Array,
? ? ? default: () => {
? ? ? ? return [];
? ? ? },
? ? },
? },
? data() {
? ? return {
? ? ? initMt: 0,
? ? ? // getPlayData:[],
? ? ? visible: true,
? ? ? stop: false,
? ? };
? },
? methods: {
? ? play() {
? ? ? const row = this.$refs["row_0"][0];
 
? ? ? setTimeout(() => {
? ? ? ? this.visible = false;
 
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.initMt++;
? ? ? ? ? if (this.initMt === this.data.length) {
? ? ? ? ? ? this.initMt = 0;
? ? ? ? ? }
? ? ? ? ? this.visible = true;
? ? ? ? });
? ? ? ? this.play();
? ? ? }, 2000);
? ? },
? },
? watch: {
 
? },
? computed: {
? ? getPlayData() {
? ? ? return this.data.concat(this.data.slice(0, 4));
? ? },
? },
? mounted() {
? ? // this.play();
? },
};
</script>
<style lang="scss" scoped>
$cellHeight: 35px;
.table-row {
? display: flex;
? line-height: 35px;
? height: 35px;
? transition: all 0.3s;
? border-bottom: 1px solid rgba(63, 88, 114, 1);
}
.table-header {
? color: rgba(87, 150, 190, 1);
}
.table-cell {
? text-align: left;
? font-size: 12px;
? text-overflow: ellipsis;
? overflow: hidden;
}
// .hasBgc {
// ? background: rgb(0, 59, 81);
// }
.hidden-row {
? height: 0 !important;
? line-height: 0 !important;
? display: none !important;
}
.table-body {
? height: 142px;
? overflow-y: hidden;
? .table-row {
? ? color: #fff;
? }
}
.scroll-wrap {
? animation: scroll 18s linear infinite;
? position: relative;
}
.scroll-wrap:hover {
? animation-play-state: paused;
}
@keyframes scroll {
? from {
? ? top: 0;
? }
? to {
? ? top: -8 * $cellHeight;
? }
}
</style>