vue中实现自动滚动表格

最新推荐文章于 2024-08-05 08:00:00 发布
最新推荐文章于 2024-08-05 08:00:00 发布
阅读量9.3k 收藏 16
点赞数 4
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43959153/article/details/107181621
版权
本文介绍了如何在Vue项目中结合vue-seamless-scroll插件实现表格的自动滚动效果。为解决表头滚动问题，采用了一个表格展示表头，另一个利用vue-seamless-scroll组件展示tbody内容，通过样式设置隐藏相应部分，确保表头固定。提供了官方文档链接及在线演示地址。
摘要由CSDN通过智能技术生成

需要配合vue-seamless-scroll插件

vue-seamless-scroll官方说明文档：https://github.com/chenxuan0000/vue-seamless-scroll/blob/master/document/README.md

vue-seamless-scroll在线demo：https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

介意看到demo演示的都是文本形式的数据，但是需求是表格做成自动滚动。直接套上去会出现表头也被滚动的现象，所以此处用了个小技巧：上面使用一个表格，只取表头部分，下面用vue-seamless-scroll包裹一个表格，只取tbody部分。

下面看关键代码：

  <section>

    <el-table :data="Data" class="custom-table-2 hidden-tbody">
      <el-table-column prop="fileName" label="文件名"></el-table-column>
      <el-table-column prop="keyword
最低0.47元/天 解锁文章
weixin_43959153
关注
专栏目录
li ul vue 滚动显示_vue ul循环滚动的问题
weixin_39815925的博客
12-22 703
图片描述想实现首尾相连的滚动效果 滚动是可以 但是不是循环的 滚动到最后一个之后 整个列表又被拉下来了， 要怎样才能实现这种循环连续滚动呢 代码改了无数次 搞了好多天了 还是没弄好 太愁人了 大家指点指点迷津 实在弄不好了我的代码网站公告:class="{'prev':prevIndex===index,'current':currentIndex===index||index===curre...
vue表格自动滚动
01-08
安装依赖 npm install vue-seamless-scroll --save main.js文件里面引入使用 import scroll from 'vue-seamless-scroll' Vue.use(scroll) html代码 css代码 .seamless-warp { height: 500px; overflow: hidden; .item li{ height: 50px; display: flex;
Vue3 列表自动滚动播放（表头固定、列表内容自动滚动播放）+ vue3-seamless-scroll - 附完整示例
最新发布
m0_48968874的博客
08-05 2541
vue3-seamless-scroll：Vue3.0 无缝滚动组件，支持Vite2.0，支持服务端打包 目前组件支持上下左右无缝滚动，单步滚动，并且支持复杂图标的无缝滚动，目前组件支持平台与Vue3.0支持平台一致。
el-table表格通过vue-seamless-scroll实现表格滚动(html + Vue + Element-UI)
weixin_42597632的博客
06-28 1393
el-table表格滚动可以通过定义两个table实现，第一个table展示标题，第二个table展示滚动内容。把内容放在vue-seamless-scroll组件中即可。
vue列表，表格自动滚动
强者惜字如金，弱者废话连篇！
06-09 710
1.vue列表，表格自动滚动 2.Vue无缝滚动
vue3实现自动滚动列表
men_blur的博客
01-15 2809
用于实现有表头跟表内容的自动滚动列表。
Vue中滚动插件vue-seamless-scroll的安装与使用
qq_44659327的博客
09-02 2333
npm安装： npm install vue-seamless-scroll --save 页面中引入组件： import vueSeamlessScroll from 'vue-seamless-scroll' 页面中调用组件： components: { vueSeamlessScroll }, 在页面的computed中定义变量 computed: { classOption () { return { step: 0.4, // 数
vue+element实现sku表格
02-12
在本文中，我们将深入探讨如何使用Vue.js框架与Element UI库来实现一个商品库存管理的SKU（Stock Keeping Unit）表格。Vue.js是一个轻量级、高性能的前端开发框架，而Element UI则是一套为开发者、设计师和产品经理...
vue实现动态添加数据滚动条自动滚动到底部的示例代码
01-19
在使用vue实现聊天页面的时候，聊天数据动态加到页面中，需要实现滚动条也自动滚动到底部。这时我找到网上有个插件 vue-chat-scroll https://www.npmjs.com/package/vue-chat-scroll 但是安装后发现是用不了的，报错...
【功能记录】在vue中实现无缝滚动列表
hejinDW的博客
08-10 2710
vue中实现无缝滚动列表
LED大屏播放中表格内容超长自动滚动
09-15
实时LED信息发布系统中，数据以表格的形式显示，当单元格中的内容超长时，自动从右向左滚动。费了点时间，做了个雏形，需要的可以下载继续完善。项目文件齐全，仅供分享。
vue项目实现表格定时滚动
linlinlinhtml_的博客
02-17 3573
两种方法实现vue项目实现表格滚动拖动元素实现改变数据实现 拖动元素实现 原理:全部数据渲染出来,只展示规定的几条数据,配合css隐藏掉多余的部分,js通过定时器将需要拖动的元素向上拖动.当数据拖动到最后一条时回到最初的位置继续操作,其中scrollTop是每次拖动的步长. 改变数据实现 通过改变页面的数据,例如有100条数据,每次只展示4条,截取4条显示,定时器每一次就+1往后挪动一条. ...
【滚动条】无间隙纵向滚动（转）
qq_40273285的博客
06-03 282
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>autoScroll</title> </head> <style> .parent { width: 300px; ...
vue列表自动滚动
qq_61672510的博客
10-12 2392
vue数据列表自动滚动，鼠标划入停止迭代效果
VUE3实现table表格数据列表无缝滚动，移入暂停，移出滚动
dai556688的博客
12-25 2404
vue3实现数据表格滚动，此数据表格滚动功能是基于VUE3 + ant-design-vue实现，支持标题列数组、数据列表、各项数据列宽度、字体大小、数据为空等多参数动态配置，最大限度满足不同功能需求。
vue3 + element-plus 设置表格自动滚动
henudxk的博客
07-06 4161
el-table 中设置 ref，用来获取元素，必须设置高度才可以滚动，鼠标放上停止自动滚动，可手动滚动，鼠标离开自动滚动。
Vue-cli项目中用js实现表格滚动(超简单)
qq_42515626的博客
03-03 1585
问题描述：在table中每次滚动一行数据，循环滚动。 首先写一个table <table > <tr> <td> 编号</td> <td>时间段</td> <td>人数</td> </...
前端vue 实现elementui表格自动滚动
06-12
你可以将表格放在一个固定高度的容器中，然后使用 CSS 的 overflow 属性来实现滚动。具体的实现步骤如下： 1. 给容器设置固定高度和 overflow-y:auto 属性，这样当内容超出容器高度时，就会自动出现纵向滚动条。 `...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值