vue自定义table表如何实现内容上下循环滚动
更新时间:2023年10月13日 15:21:08 作者:·某某·
这篇文章主要介绍了vue自定义table表如何实现内容上下循环滚动问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
需求
对一段table表数据进行异常与正常类型的分类处理;
异常数据固定于table表内上方显示;
正常数据则在异常数据下方实现循环滚动效果;
(若正常数据高度未溢出table表高度,正常显示即可,无需滚动)
效果图展示
代码核心部分
<!-- html 部分--> <!-- scrollWrap: 滚动区域; scrollWrapHeight:table总高度 - header高度 - 异常数据高度 --> <div class="scrollWrap" :style="{ height: scrollWrapHeight + 'px', overflowY: 'hidden', }" > <!-- scrollNum:滚动时,复制正常table数据一份,用于上下循环滚动无缝衔接 --> <div :class="scrollNum > 1 ? 'scroll' : ''" :style="{ animationDuration: time + 's', }" v-for="(a, index) in scrollNum" :key="index" > <div class="table-bodySuccess" v-for="(item, index) in successData" :key="index" :style="{ background: successBgColor(index), }" > <div class="table-body-item-title"> {{ item.name }} </div> <div class="table-body-item-title"> <div class="circle"></div> </div> <div class="table-body-item-title">{{ item.tampNum }}℃</div> <div class="table-body-item-title">{{ item.eleNum }}A</div> </div> </div> </div> <!-- css 部分--> .scrollWrap::-webkit-scrollbar { width: 0 !important; } .scroll { animation: scrollData 10s infinite linear; } @keyframes scrollData { from { transform: translateY(0px); } to { transform: translateY(-100%); } }
完整代码展示
<template> <div class="left"> <div class="table"> <div class="table-header"> <div class="table-header-item-title">名称</div> <div class="table-header-item-title">状态</div> <div class="table-header-item-title">数据标题1</div> <div class="table-header-item-title">数据标题2</div> </div> <div class="table-bodyError" v-for="(item, index) in errData" :key="index" :style="{ background: errBgColor(index) }" > <div class="table-body-item-title"> {{ item.name }} </div> <div class="table-body-item-title"> <div class="circle"></div> </div> <div class="table-body-item-title"> {{ item.tampNum }} </div> <div class="table-body-item-title"> {{ item.eleNum }} </div> </div> <div class="scrollWrap" :style="{ height: scrollWrapHeight + 'px', overflowY: 'hidden', }" > <div :class="scrollNum > 1 ? 'scroll' : ''" :style="{ animationDuration: time + 's', }" v-for="(a, index) in scrollNum" :key="index" > <div class="table-bodySuccess" v-for="(item, index) in successData" :key="index" :style="{ background: successBgColor(index), }" > <div class="table-body-item-title"> {{ item.name }} </div> <div class="table-body-item-title"> <div class="circle"></div> </div> <div class="table-body-item-title">{{ item.tampNum }}℃</div> <div class="table-body-item-title">{{ item.eleNum }}A</div> </div> </div> </div> </div> </div> </template>
<script> export default { name: 'test', data() { return { // 调节滚动速率 time: 15, errData: [ { name: 11, status: 0, tampNum: 10, eleNum: 15 }, { name: 22, status: 0, tampNum: 10, eleNum: 15 }, { name: 33, status: 0, tampNum: 10, eleNum: 15 }, ], successData: [ { name: 'aaa', status: 1, tampNum: 10, eleNum: 15 }, { name: 'bbb', status: 1, tampNum: 10, eleNum: 15 }, { name: 'ccc', status: 1, tampNum: 10, eleNum: 15 }, { name: 'ddd', status: 1, tampNum: 10, eleNum: 15 }, { name: 'eee', status: 1, tampNum: 10, eleNum: 15 }, { name: 'fff', status: 1, tampNum: 10, eleNum: 15 }, { name: 'ggg', status: 1, tampNum: 10, eleNum: 15 }, { name: 'hhh', status: 1, tampNum: 10, eleNum: 15 }, { name: 'iii', status: 1, tampNum: 10, eleNum: 15 }, { name: 'jjj', status: 1, tampNum: 10, eleNum: 15 }, { name: 'kkk', status: 1, tampNum: 10, eleNum: 15 }, ], } }, computed: { errBgColor: function () { return function (index) { if (index % 2 === 0) { return '#e8f7ff' } else { return '#ffffff' } } }, successBgColor: function () { return function (index) { if (this.errData.length % 2 === 0) { if (index % 2 === 0) { return '#e8f7ff' } else { return '#ffffff' } } else { if (index % 2 === 0) { return '#ffffff' } else { return '#e8f7ff' } } } }, // 滚动层高度 scrollWrapHeight: function () { // left高度 - table-header高度 - table-bodyError高度 * 个数 return 600 - 52 - this.errData.length * 52 }, // 滚动层份数,当内容溢出scrollWrapHeight,复制两份,添加滚动动画 // 否则就一份,不填加滚动动画 scrollNum: function () { let successHeight = this.successData.length * 52 if (successHeight > this.scrollWrapHeight) { return 2 } else { return 1 } }, }, } </script>
<style lang="less" scoped> .left { width: 520px; height: 600px; background-color: #fab4b4; border-bottom: 1px solid red; position: relative; .table-header { width: 100%; background-color: skyblue; color: #e1f3ff; font-size: 16px; font-weight: 700; display: flex; .table-header-item-title { height: 52px; width: 100%; display: flex; justify-content: center; align-items: center; } } .table-bodyError, .table-bodySuccess { width: 100%; color: red; font-size: 16px; display: flex; .table-body-item-title { width: 100%; height: 52px; display: flex; justify-content: center; align-items: center; .circle { width: 12px; height: 12px; background: #ea4141; border-radius: 50%; } } } .table-bodySuccess { color: #000; .table-body-item-title { .circle { background: #29b153; } } } .scrollWrap::-webkit-scrollbar { width: 0 !important; } .scroll { animation: scrollData 10s infinite linear; } @keyframes scrollData { from { transform: translateY(0px); } to { transform: translateY(-100%); } } } </style>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
最新评论