TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
剑轩
故如虹,知恩;故如月,知明
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
CSS
15篇
微服务
41篇
Git
14篇
.NET
102篇
移动开发
33篇
软件架构
23篇
.NET Core
119篇
.NET MVC
11篇
英语
3篇
随笔
86篇
Bootstrap
3篇
Redis
21篇
编辑器
10篇
Js相关
15篇
虚拟化
8篇
更多
Oracle
7篇
Python
14篇
数据库
26篇
EF
17篇
微信
3篇
前端
151篇
消息队列
6篇
docker
41篇
多线程
1篇
Java
4篇
软件基础
2篇
C++
2篇
WCF
7篇
Linux
7篇
nginx
5篇
K8S
9篇
ABP
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
vue使用div实现自定义表格table,实现内容向上循环滚动
1527
人阅读
2021/3/30 18:57
总访问:
3968956
评论:
0
收藏:
0
手机
分类:
前端
效果如下:会循环向上滚动,做成动态图太大了,这里贴一个静态的效果 ![](https://img.tnblog.net/arcimg/aojiancc2/1a88fe67cf464f1495ae5873dd7699aa.png) ### 封装的表格代码如下 ``` <!-- 封装可以循环滚动的table --> <template> <div> <div class="scroll_table"> <div> <!-- <div class="scroll_table_header" style="display: flex;padding: 0 10px 0 10px;"> <div style="width: 50px;">姓名</div> <div style="width: 153px;">班级</div> <div style="width: 187px;">事件</div> <div>时间</div> </div> --> <!-- 根据列配置动态生成表头。先简单的处理一下表头的列宽,让表头的宽度保持和列宽一样 --> <div class="scroll_table_header" :class="rowStyle"> <div v-for="(citem, zindex) in columnsConfg" :key="zindex" :style="{ width: citem.width, paddingLeft: citem.paddingLeft }"> {{ citem.label }}</div> </div> <!-- 可以让表格滚动的包裹层 --> <div class="scrollWrap" :style="{ height: scrollWrapHeight + 'px', overflowY: 'hidden', }"> <!-- 让表格循环滚动的动画样式添加,以及滚动时间的样式设置等 --> <div class="scroll_table_body" @mouseleave="toStartRun" @mouseenter="toPausedRun" :class="[scrollNum > 1 ? 'scroll' : '', animationPlayState]" :style="{ animationDuration: runSpeed + 's', }" v-for="(a, index) in scrollNum" :key="index"> <!-- 具体的表格数据 --> <div style="display: flex;" v-for="(item, index) in rowdata" :key="index" class="content_tr" :class="rowStyle"> <!-- 根据传递进来的列配置来动态解析数据以及列宽是多少 --> <div v-for="(citem, zindex) in columnsConfg" :key="zindex" :style="{ width: citem.width, paddingLeft: citem.paddingLeft }"> {{ item[citem.prop] }} </div> </div> </div> </div> </div> </div> </div> </template> <script > export default { // 组件名字 name: 'ScrollTable', // 组件参数 props: { // 行的显示风格,居中或者左对齐等,可以根据需要多写几套样式 rowStyle: { type: String, default: 'content_tr_center' }, // 滚动层的高度。可以把参数传递成表格的高度,滚动层的高度就等于表格的高度减去表头的高度,其实都无所谓怎么传递都可以 scrollContentHeight:{ type: Number, default: 350 }, // 滚动速度 runSpeed:{ type: Number, default: 15 }, // 列配置 columnsConfg: { type: Array, default: () => { return [] }, }, // 数据项 rowdata: { type: Array, default: () => { return [] }, // required: true } }, data() { return { // 配置默认是否滚动。animationPlayStatePaused(暂停),animationPlayStateRun(滚动) animationPlayState: "animationPlayStateRun", // 调节滚动速率。这个可以设置成参数从外边传递过来 // time: 15, } }, computed: { // 滚动层高度 scrollWrapHeight: function () { /* 其实就是表格整体高度减去表头高度,可以写死,也可以动态计算一下,如果表头高度需要进行参数传递的话。 当然也可以直接传递滚动层的高度,就不用去减去表头的高度了,根据实际情况来就行了 */ // return 350 return this.scrollContentHeight }, // 滚动层份数,当内容溢出scrollWrapHeight,复制两份,添加滚动动画 // 否则就一份,不填加滚动动画 scrollNum: function () { // 41是每行的高度,可以写死,也可以通过参数传递进来 let successHeight = this.rowdata.length * 41 // alert(successHeight) // alert(this.scrollWrapHeight) if (successHeight > this.scrollWrapHeight) { return 2 } else { return 1 } }, }, mounted() { }, beforeDestroy() { }, methods: { // 暂停滚动 toPausedRun() { this.animationPlayState = "animationPlayStatePaused" }, // 开始滚动 toStartRun() { this.animationPlayState = "animationPlayStateRun" } } } </script> <style lang="scss" scoped> .scroll_table { margin-top: 20px; width: 100%; border-collapse: collapse; .scrollWrap::-webkit-scrollbar { width: 0 !important; } .scroll { animation: scrollData 10s infinite linear; } .animationPlayStateRun { animation-play-state: running; } .animationPlayStatePaused { animation-play-state: paused; } @keyframes scrollData { from { transform: translateY(0px); } to { transform: translateY(-100%); } } // 表头样式 .scroll_table_header { background-color: rgba(13, 81, 137, 0.5); // opacity: 0.5; display: flex; // padding: 0 10px 0 10px; div { height: 33px; font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #23FFFC; line-height: 33px; // padding-left: 10px; } } .content_tr { height: 41px; // background: #082044; background-color: rgba(8, 32, 68, 0.4); div { font-size: 12px; font-family: Microsoft YaHei; font-weight: 400; color: #FFFFFF; line-height: 33px; height: 33px; // padding-left: 10px; } // div:last-child { // flex: 1; // } } //----------- 行风格-左对齐 -------------- .content_tr_left { div { text-align: left; } } //----------- 行风格-居中 -------------- .content_tr_center { div { text-align: center; } } } </style> ``` ### 使用封装的循环滚动的表格组件 引入组件 ``` import ScrollTable from '@/views/component/scrollTable.vue' export default { components: { ScrollTable, }, ``` #### 左边那块的表格 ``` <ScrollTable rowStyle="content_tr_center" :runSpeed=22 :scrollContentHeight=310 :columnsConfg="learDataColumnsConfg" :rowdata="rowdata"> </ScrollTable> ``` 这里配置了行的对其方式是居中,滚动速度runSpeed为22,内容高度scrollContentHeight为310像数。 **列配置如下** ``` learDataColumnsConfg: [ { label: "班级名称", prop: "name", width: "150px", paddingLeft: "0px" }, { label: "班主任", prop: "class", width: "90px", paddingLeft: "0px" }, { label: "评估", prop: "content", width: "90px", paddingLeft: "0px" }, { label: "实验", prop: "datetiem", width: "90px", paddingLeft: "0px" }, { label: "项目", prop: "pro", width: "90px", paddingLeft: "0px" }, { label: "综合", prop: "zh", width: "90px", paddingLeft: "0px" }, { label: "排名", prop: "sort", width: "70px", paddingLeft: "0px" }, ], ``` **数据项** ``` rowdata: [ { name: "2022级计算机1班", class: "yy1", content: "xx", datetiem: '66.66', pro: "40.66%", zh: "50.55%", sort: "1" }, { name: "2022级计算机1班", class: "yy2", content: "xx", datetiem: '66.66', pro: "40.66%", zh: "50.55%", sort: "3" }, { name: "2022级计算机1班", class: "yy3", content: "xx", datetiem: '66.66', pro: "40.66%", zh: "50.55%", sort: "3" }, { name: "2022级计算机1班", class: "yy2", content: "xx", datetiem: '66.66', pro: "40.66%", zh: "50.55%", sort: "4" }, { name: "2022级计算机1班", class: "yy2", content: "xx", datetiem: '66.66', pro: "46.66%", zh: "55.55%", sort: "5" }, { name: "2022级计算机1班", class: "yy2", content: "xx", datetiem: '66.66', pro: "90.66%", zh: "50.55%", sort: "6" }, { name: "2022级计算机1班", class: "yy3", content: "xx", datetiem: '76.76', pro: "39.66%", zh: "59.55%", sort: "7" }, { name: "2022级计算机1班", class: "yy3", content: "xx", datetiem: '76.76', pro: "39.66%", zh: "59.55%", sort: "8" }, { name: "2022级计算机1班", class: "yy3", content: "xx", datetiem: '76.76', pro: "39.66%", zh: "59.55%", sort: "9" } ], ``` #### 右边那块的表格 ``` <ScrollTable rowStyle="content_tr_left" :runSpeed=20 :columnsConfg="columnsConfg" :rowdata="newrowdata"> </ScrollTable> ``` **列配置如下** ``` columnsConfg: [ { label: "姓名", prop: "name", width: "70px", paddingLeft: "20px" }, { label: "班级", prop: "class", width: "160px", paddingLeft: "20px" }, { label: "事件", prop: "content", width: "309px", paddingLeft: "0px" }, { label: "时间", prop: "datetiem", width: "100px", paddingLeft: "0px" } ], ``` 我们表格配置了rowStyle="content_tr_left",表示左对齐,然后在行配置的时候第一行,第二行我们都配置了paddingLeft: "20px",表示距离左边一点间距。 我们这个组件里边封装的列配置目前可以支持配置显示的字段、配置列的宽度、列的名称(对应生成表头)、列的某些样式,比如我这里设置了padding-left,还需要什么灵活的配置都可以自己实现。 **这个表格的数据项配置** 随便贴几条就行了 ``` newrowdata: [ { name: "张三丰", class: "2022级计算机1班", content: "通过什么什么什么什么什么评估", datetiem: '8-15 09:33:52', }, { name: "张三丰", class: "2022级计算机1班", content: "通过什么什么什么什么什么评估通过什么什么通", datetiem: '8-15 09:33:52', }, { name: "张三丰", class: "2022级计算机1班", content: "通过什么什么什么什么什么评估通过什么什么通", datetiem: '8-15 09:33:52', }, ], ``` 注意如果数据少了它不会滚动的,至少需要数据的高度要超过一屏的高度,也就是我们传递的滚动区域的高度,这个是可以自己控制的。 ### 优化一下列配置,如果不传递paddingLeft就不添加paddingLeft样式 现在是如果不想设置paddingLeft还需要传递一个paddingLeft:0。我们解析的时候都是赋值了的,我们需要处理一下,如果没有传递就不加这个样式 ![](https://img.tnblog.net/arcimg/aojiancc2/47b31c4e89bc42d8ae3c2e80e0d8c531.png) **解决方式就是封装一个方法,判断一下有没有对应的配置,有就增加上去** ![](https://img.tnblog.net/arcimg/aojiancc2/d9815abdcd6041f38b6b1dc6af9c97f2.png) 使用的时候就不在绑定的时候写死样式了,而是通过方法处理后返回需要绑定的样式,这样就会更灵活一点,方法处理起来也很方便 ![](https://img.tnblog.net/arcimg/aojiancc2/655cec68c5a247f5b741db1ce7f97084.png) ### 实现一下,列宽度超过配置的宽度就出现省略号 这个很简单给单元格加一点样式就行了 ``` .content_tr { height: 41px; // background: #082044; background-color: rgba(8, 32, 68, 0.4); div { font-size: 12px; font-family: Microsoft YaHei; font-weight: 400; color: #FFFFFF; line-height: 33px; height: 33px; //超出出现省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // padding-left: 10px; } // div:last-child { // flex: 1; // } } ``` ### 增加一个是否滚动的配置 增加一个是否滚动的配置 ``` // 组件参数 props: { // 行的显示风格,居中或者左对齐等,可以根据需要多写几套样式 rowStyle: { type: String, default: 'content_tr_center' }, // 滚动速度 runSpeed: { type: Number, default: 15 }, // --------------增加一个是否滚动的配置------------ isRun: { type: Boolean, default: true }, }, ``` 判断是否滚动的时候增加一个这个条件的判断即可: ![](https://img.tnblog.net/arcimg/aojiancc2/5b57753dfdb14db8acac2bc3d9f171ca.png) 使用的时候如果不需要滚动就把这个参数设置成false即可: ``` <ScrollTable rowStyle="content_tr_center" :isRun="false" animationPlayState="animationPlayStatePaused" :runSpeed="classDataRunSpeed" :scrollContentHeight=310 :columnsConfg="classDataColumnsConfg" :rowdata="classDataRowdata"> </ScrollTable> ``` 下一步还要继续优化的话,我们可以实现宽度没有配置的话就做自适应等的效果等。
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}