element -ui table表格内容无限滚动 使用插件vue-seamless-scroll

使用插件

一、安装组件依赖
npm install vue-seamless-scroll

二、引入组件

import vueSeamlessScroll from "vue-seamless-scroll";

components: { vueSeamlessScroll },

   <div class="table-list "><vue-seamless-scroll :class-option="Option" :data="tableData" class="seamless-warp"style="width: 100%; height: 20px;"><el-table ref="table" :data="tableData" style="width: 100%;margin-top:5px" :show-header="false" height="calc(100% - 40px)" size="small"><el-table-column prop="date4" label="监督姓名" algin="center" /><el-table-column prop="date7" label="驻派动态" algin="center" /></el-table></vue-seamless-scroll></div>

 computed: {Option() {return {step: 0.2, // 数值越大速度滚动越快limitMoveNum: 1, // 开始无缝滚动的数据量 this.Data.lengthhoverStop: false, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 1000, // 单步运动停止的时间(默认值1000ms)};},},

  .table-list {width: 100%;height: calc(100% - 65px);overflow: hidden;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/107753.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SSTI注入利用姿势合集

文章目录 前言SSTI模板注入原理&#xff1f;关于Python的类知识构造链的思路Jinjia2获取配置信息lipsumrequesturl_forget_flashed_messagesg对象 Jinjia2 Bypass.绕过引号绕过_绕过init过滤[ ]被过滤 羊城杯2023[决赛] SSTI2020XCTF 华为专项赛Tornado通用手法tornado.templat…

js dispatchEvent派发自定义事件

低版本IE浏览器不兼容 dispatchEvent使用 在标准浏览器提供了元素触发自定义事件的方法 element.dispatchEvent()&#xff0c;就是说&#xff0c;我们可以不用在DOM上点击按钮触发事件&#xff0c;在代码里通过 dispatchEvent&#xff08;&#xff09;就能触发事件。如下&…

NZ系列工具NZ03:利用右键进行筛选操作

【分享成果&#xff0c;随喜正能量】生活就是这样&#xff0c;别人看的是结果&#xff0c;而自己撑的却是整个过程。曾经的微笑&#xff0c;是一种心情&#xff0c;现在的微笑&#xff0c;只不过是一种表情。如果情绪不能用言语说出来&#xff0c;那就去吹吹风吧。。 我的教程…

RobotFrameWork自动化测试环境搭建

前言 Robot Framework是一款python编写的功能自动化测试框架。具备良好的可扩展性&#xff0c;支持关键字驱动&#xff0c;可以同时测试多种类型的客户端或者接口&#xff0c;可以进行分布式测试执行。主要用于轮次很多的验收测试和验收测试驱动开发&#xff08;ATDD&#xff0…

蓝桥杯打卡Day7

文章目录 阶乘的末尾0整除问题 一、阶乘的末尾0IO链接 本题思路&#xff1a;由于本题需要求阶乘的末尾0&#xff0c;由于我们知道2*510可以得到一个0&#xff0c;那么我们就可以找出2的数和5的数&#xff0c;但是由于是阶乘&#xff0c;所以5的数量肯定是小于2的数量&#xf…

企业网络革命:连接和访问的智慧选项

近年来&#xff0c;企业网络通信需求可谓五花八门&#xff0c;变幻莫测。它不仅为企业的生产、办公、研发、销售提供全面赋能&#xff0c;同时也让企业业务规模变大成为了可能。今天&#xff0c;我们来聊聊广域网中两个不可忽视的概念&#xff1a;连接&#xff08;Connection&a…

飞行动力学 - 第20节-part3-机翼位置及尾翼对横向稳定性影响 之 基础点摘要

飞行动力学 - 第20节-part3-机翼位置及尾翼对横向稳定性影响 之 基础点摘要 1. 翼身干扰2. 平尾贡献3. 尾翼贡献4. 参考资料 1. 翼身干扰 - 机翼垂直位置 上单翼&#xff0c;增稳 下单翼&#xff0c;降低稳定性 上反角 增稳 正比于上反角 下反角 降低稳定性 反比于上反角 后掠…

【窗体】Winform两个窗体之间通过委托事件进行值传递,基础篇

2023年&#xff0c;第38周。给自己一个目标&#xff0c;然后坚持总会有收货&#xff0c;不信你试试&#xff01; 在实际项目中&#xff0c;我们可能会用到一些窗体做一些小工具或者小功能。比如&#xff1a;运行程序&#xff0c;在主窗体A基础上&#xff0c;点击某个按钮希望能…

idea创建一个微服务项目

idea创建一个微服务项目 前提&#xff1a;懂得创建基于pom 的 springboot项目 1.像平时创建Maven项目一样创建一个项目 2.删掉src文件&#xff0c;只剩下下面的东西 3.基于这个项目创建model&#xff0c;model也是一个Maven项目&#xff0c;基于springboot mvc 都行&#xff…

工作中有许多比较常用的SQL脚本

工作中有许多比较常用的SQL脚本&#xff0c;今天开始分几章分享给大家。 1、行转列的用法PIVOTCREATE table test (id int,name nvarchar(20),quarter int,number int) insert into test values(1,N苹果,1,1000) insert into test values(1,N苹果,2,2000) insert into test va…

01-Kafaka

1、Kafka 2 的安装与配置 1、上传kafka_2.12-1.0.2.tgz到服务器并解压&#xff1a; tar -zxf kafka_2.12-1.0.2.tgz -C /opt 2、配置环境变量并更新&#xff1a; 编辑profile配置文件&#xff1a; vim /etc/profile #设置kafka的环境变量export KAFKA_HOME/opt/kafka_2.1…

Redis——渐进式遍历和数据库管理命令

介绍 如果使用keys * 这样的操作&#xff0c;将Redis中所有的key都获取到&#xff0c;由于Redis是单线程工作&#xff0c;这个操作本身又要消耗很多时间&#xff0c;那么就会导致Redis服务器阻塞&#xff0c;后续的操作无法正常执行 而渐进式遍历&#xff0c;通过多次执行遍历…