vue2 el-table使用css的方式实现列表自动滚动!doctypehtmlhtmllangzh-CNheadmetacharsetUTF-8/title/title!-- 1. 引入Vue2 CDN --scriptsrchttps://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.common.dev.min.jscrossoriginanonymous/script!-- 2. 引入Element UI样式和JS --linkrelstylesheethrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css/scriptsrchttps://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.14/index.min.jscrossoriginanonymous/scriptstyle/* 1. 外层容器 */.table-wrapper{width:700px;height:300px;overflow:hidden;position:relative;}/* 2. 表头层固定顶部 */.table-header{position:absolute;top:0;left:0;width:100%;z-index:10;}/* 表头层只显示表头隐藏内容行 */.table-header .el-table__body-wrapper{display:none!important;}.table-header .el-table{margin:0!important;padding:0!important;}/* 3. 内容滚动层独立滚动容器 */.table-body-scroll{position:absolute;top:41px;left:0;width:100%;height:calc(100% - 41px);overflow:hidden;padding:0!important;margin:0!important;}/* 4. 滚动内容容器核心样式 */.table-scroll-content{display:flex;flex-direction:column;/* 核心动画短延迟启动保证首行显示正常滚动 */animation:table-scroll-up 20s linear infinite 0.1s;}/* 悬停暂停核心样式优先级拉满 */.table-body-scroll:hover .table-scroll-content{animation-play-state:paused!important;cursor:pointer;}.table-scroll-item .el-table{border-top:none!important;}.table-scroll-item .el-table__header-wrapper{display:none!important;}/* 消除表格body默认边距首行顶格 */.table-scroll-item .el-table__body-wrapper{border-top:none!important;}keyframestable-scroll-up{0%{transform:translate3d(0,0,0);}100%{transform:translate3d(0,-50%,0);}}/style/headbodydividappdivclasstable-wrapper!-- 固定表头 --divclasstable-headerel-table:datatableDataborderstylewidth:100%el-table-columnpropidlabel序号width80aligncenter/el-table-columnel-table-columnpropnamelabel告警类型width150aligncenter/el-table-columnel-table-columnproparealabel告警区域width120aligncenter/el-table-columnel-table-columnproptimelabel告警时间aligncenter/el-table-columnel-table-columnpropstatuslabel处理状态width100aligncenter/el-table-column/el-table/div!-- 内容滚动层绑定鼠标事件兜底 --divclasstable-body-scrollrefbodyScrollmouseenterpauseScrollmouseleaveresumeScrolldivclasstable-scroll-contentrefscrollContent!-- 第一份内容 --divclasstable-scroll-itemel-table:datatableDataborderstylewidth:100%el-table-columnpropidlabel序号width80aligncenter/el-table-columnel-table-columnpropnamelabel告警类型width150aligncenter/el-table-columnel-table-columnproparealabel告警区域width120aligncenter/el-table-columnel-table-columnproptimelabel告警时间aligncenter/el-table-columnel-table-columnpropstatuslabel处理状态width100aligncenter/el-table-column/el-table/div!-- 第二份内容无缝衔接 --divclasstable-scroll-itemel-table:datatableDataborderstylewidth:100%el-table-columnpropidlabel序号width80aligncenter/el-table-columnel-table-columnpropnamelabel告警类型width150aligncenter/el-table-columnel-table-columnproparealabel告警区域width120aligncenter/el-table-columnel-table-columnproptimelabel告警时间aligncenter/el-table-columnel-table-columnpropstatuslabel处理状态width100aligncenter/el-table-column/el-table/div/div/div/div/divscriptnewVue({el:#app,data(){return{tableData:[{id:1,name:陌生人闯入,area:区域1,time:2026-03-17 10:01:23,status:未处理},{id:2,name:车辆违停,area:区域2,time:2026-03-17 10:02:45,status:已处理},{id:3,name:人员聚集,area:区域3,time:2026-03-17 10:03:12,status:未处理},{id:4,name:消防通道堵塞,area:区域4,time:2026-03-17 10:04:56,status:未处理},{id:5,name:翻越围栏,area:区域5,time:2026-03-17 10:05:34,status:已处理},{id:6,name:烟雾检测,area:区域6,time:2026-03-17 10:06:18,status:未处理},{id:7,name:声光异常,area:区域7,time:2026-03-17 10:07:05,status:已处理},{id:8,name:设备离线,area:区域8,time:2026-03-17 10:08:42,status:未处理},],tableScrollDuration:20,};},mounted(){// DOM渲染完成后调整样式和动画this.$nextTick((){this.autoAdjustHeaderHeight();this.setTableScrollDuration();// 手动触发动画确保滚动生效constscrollContentthis.$refs.scrollContent;if(scrollContent){scrollContent.style.animation;setTimeout((){scrollContent.style.animation${this.tableScrollDuration}s table-scroll-up linear infinite 0.1s;},100);}});},methods:{// 动态调整滚动时长setTableScrollDuration(){constscrollContentthis.$refs.scrollContent;if(!scrollContent)return;constdurationMath.max(15,this.tableData.length*2);this.tableScrollDurationduration;scrollContent.style.animationDuration${duration}s;},// 自动适配表头高度autoAdjustHeaderHeight(){constheaderthis.$el.querySelector(.table-header);constbodyScrollthis.$refs.bodyScroll;if(headerbodyScroll){constheaderHeightheader.offsetHeight;bodyScroll.style.top${headerHeight}px;bodyScroll.style.heightcalc(100% -${headerHeight}px);}},pauseScroll(){constscrollContentthis.$refs.scrollContent;if(scrollContent){scrollContent.style.animationPlayStatepaused;}},resumeScroll(){constscrollContentthis.$refs.scrollContent;if(scrollContent){scrollContent.style.animationPlayStaterunning;}},},});/script/body/html
vue2 el-table使用css的方式实现列表自动滚动
vue2 el-table使用css的方式实现列表自动滚动!doctypehtmlhtmllangzh-CNheadmetacharsetUTF-8/title/title!-- 1. 引入Vue2 CDN --scriptsrchttps://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.common.dev.min.jscrossoriginanonymous/script!-- 2. 引入Element UI样式和JS --linkrelstylesheethrefhttps://unpkg.com/element-ui/lib/theme-chalk/index.css/scriptsrchttps://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.14/index.min.jscrossoriginanonymous/scriptstyle/* 1. 外层容器 */.table-wrapper{width:700px;height:300px;overflow:hidden;position:relative;}/* 2. 表头层固定顶部 */.table-header{position:absolute;top:0;left:0;width:100%;z-index:10;}/* 表头层只显示表头隐藏内容行 */.table-header .el-table__body-wrapper{display:none!important;}.table-header .el-table{margin:0!important;padding:0!important;}/* 3. 内容滚动层独立滚动容器 */.table-body-scroll{position:absolute;top:41px;left:0;width:100%;height:calc(100% - 41px);overflow:hidden;padding:0!important;margin:0!important;}/* 4. 滚动内容容器核心样式 */.table-scroll-content{display:flex;flex-direction:column;/* 核心动画短延迟启动保证首行显示正常滚动 */animation:table-scroll-up 20s linear infinite 0.1s;}/* 悬停暂停核心样式优先级拉满 */.table-body-scroll:hover .table-scroll-content{animation-play-state:paused!important;cursor:pointer;}.table-scroll-item .el-table{border-top:none!important;}.table-scroll-item .el-table__header-wrapper{display:none!important;}/* 消除表格body默认边距首行顶格 */.table-scroll-item .el-table__body-wrapper{border-top:none!important;}keyframestable-scroll-up{0%{transform:translate3d(0,0,0);}100%{transform:translate3d(0,-50%,0);}}/style/headbodydividappdivclasstable-wrapper!-- 固定表头 --divclasstable-headerel-table:datatableDataborderstylewidth:100%el-table-columnpropidlabel序号width80aligncenter/el-table-columnel-table-columnpropnamelabel告警类型width150aligncenter/el-table-columnel-table-columnproparealabel告警区域width120aligncenter/el-table-columnel-table-columnproptimelabel告警时间aligncenter/el-table-columnel-table-columnpropstatuslabel处理状态width100aligncenter/el-table-column/el-table/div!-- 内容滚动层绑定鼠标事件兜底 --divclasstable-body-scrollrefbodyScrollmouseenterpauseScrollmouseleaveresumeScrolldivclasstable-scroll-contentrefscrollContent!-- 第一份内容 --divclasstable-scroll-itemel-table:datatableDataborderstylewidth:100%el-table-columnpropidlabel序号width80aligncenter/el-table-columnel-table-columnpropnamelabel告警类型width150aligncenter/el-table-columnel-table-columnproparealabel告警区域width120aligncenter/el-table-columnel-table-columnproptimelabel告警时间aligncenter/el-table-columnel-table-columnpropstatuslabel处理状态width100aligncenter/el-table-column/el-table/div!-- 第二份内容无缝衔接 --divclasstable-scroll-itemel-table:datatableDataborderstylewidth:100%el-table-columnpropidlabel序号width80aligncenter/el-table-columnel-table-columnpropnamelabel告警类型width150aligncenter/el-table-columnel-table-columnproparealabel告警区域width120aligncenter/el-table-columnel-table-columnproptimelabel告警时间aligncenter/el-table-columnel-table-columnpropstatuslabel处理状态width100aligncenter/el-table-column/el-table/div/div/div/div/divscriptnewVue({el:#app,data(){return{tableData:[{id:1,name:陌生人闯入,area:区域1,time:2026-03-17 10:01:23,status:未处理},{id:2,name:车辆违停,area:区域2,time:2026-03-17 10:02:45,status:已处理},{id:3,name:人员聚集,area:区域3,time:2026-03-17 10:03:12,status:未处理},{id:4,name:消防通道堵塞,area:区域4,time:2026-03-17 10:04:56,status:未处理},{id:5,name:翻越围栏,area:区域5,time:2026-03-17 10:05:34,status:已处理},{id:6,name:烟雾检测,area:区域6,time:2026-03-17 10:06:18,status:未处理},{id:7,name:声光异常,area:区域7,time:2026-03-17 10:07:05,status:已处理},{id:8,name:设备离线,area:区域8,time:2026-03-17 10:08:42,status:未处理},],tableScrollDuration:20,};},mounted(){// DOM渲染完成后调整样式和动画this.$nextTick((){this.autoAdjustHeaderHeight();this.setTableScrollDuration();// 手动触发动画确保滚动生效constscrollContentthis.$refs.scrollContent;if(scrollContent){scrollContent.style.animation;setTimeout((){scrollContent.style.animation${this.tableScrollDuration}s table-scroll-up linear infinite 0.1s;},100);}});},methods:{// 动态调整滚动时长setTableScrollDuration(){constscrollContentthis.$refs.scrollContent;if(!scrollContent)return;constdurationMath.max(15,this.tableData.length*2);this.tableScrollDurationduration;scrollContent.style.animationDuration${duration}s;},// 自动适配表头高度autoAdjustHeaderHeight(){constheaderthis.$el.querySelector(.table-header);constbodyScrollthis.$refs.bodyScroll;if(headerbodyScroll){constheaderHeightheader.offsetHeight;bodyScroll.style.top${headerHeight}px;bodyScroll.style.heightcalc(100% -${headerHeight}px);}},pauseScroll(){constscrollContentthis.$refs.scrollContent;if(scrollContent){scrollContent.style.animationPlayStatepaused;}},resumeScroll(){constscrollContentthis.$refs.scrollContent;if(scrollContent){scrollContent.style.animationPlayStaterunning;}},},});/script/body/html
