vue实现列表自动滚动效果

1.下载插件

npm install vue-seamless-scroll --save

 2.在main.js中引入注册

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

3.在页面中使用(写一个固定的表头 el-table:show-header="status" 设置为false,自带的表头不显示)

 <div class="table-box">//静态表头<div class="toptitle"><div class="item">序号</div><div class="item">检测点</div><div class="item">时间</div><div class="item">识别项</div><div class="item">结果</div></div>//滚动组件<vue-seamless-scroll :data="tableData" :class-option="optionHover" class="seamless-warp"><el-table :data="tableData" @row-click="showRowDetail" style="width: 100%"  :show-header="status":row-class-name="tableRowClassName"><el-table-column type="index" label="序号" width="50"></el-table-column><el-table-column prop="siteName" label="检测点"><template slot-scope="scope"><span>{{ scope.row.siteName ? scope.row.siteName : '---' }}</span></template></el-table-column><el-table-column prop="ts" label="时间"><template slot-scope="scope"><span>{{ scope.row.ts ? scope.row.ts : '---' }}</span></template></el-table-column><el-table-column prop="fun" label="识别项"><template slot-scope="scope"><span>{{ scope.row.fun == "valve" ? '炉门' : scope.row.fun == "rod" ? '摆臂' : '---' }}</span></template></el-table-column><el-table-column prop="err" label="结果"><template slot-scope="scope"><span>{{ scope.row.err === 0 ? '正常' : scope.row.err === 1 ? '异常' : '---' }}</span></template></el-table-column></el-table></vue-seamless-scroll>
</div>

4.js配置滚动插件配置对象

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

5.样式

<style lang="scss" scoped>
.right-box {height: 36%;.table-box {height: 85.2%;background: #051f51;}}.seamless-warp {height: 200px;overflow: hidden;}</style>

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

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

相关文章

什么是单例模式?

单例模式&#xff0c;属于创建类型的一种常用的软件设计模式。通过单例模式的方法创建的类在当前进程中只有一个实例&#xff08;根据需要&#xff0c;也有可能一个线程中属于单例&#xff0c;如&#xff1a;仅线程上下文内使用同一个实例&#xff09; 数学与逻辑学中&#xff…

Oracle迁移到mysql-导出mysql所有索引和主键

导出建库表索引等&#xff1a; [rootlnpg ~]# mysqldump -ugistar -pxxx -h192.168.207.143 --no-data -d lndb > lndb20230223-1.sql 只导出索引&#xff1a;参考&#xff1a;MYSQL导出现有库中的索引脚本_mysql 导出数据库所有表的主键和索引-CSDN博客 -- MYSQL导出现有…

【Numpy】P1 概述与安装

目录 概述安装Windows MacOS 环境下Linux 环境下 概述 NumPy&#xff08;Numerical Python&#xff09;&#xff0c;是一个对 Python 进行增强的库。它为 Python 提供了强大的多维数组对象和丰富的数学函数库&#xff0c;主要用于处理高维数组和矩阵计算。其核心功能包括&…

1、什么是ETF?

ETF是Exchange Traded Fund的英文缩写&#xff0c;中文称为“交易型开放式指数基金”&#xff0c;又称“指数股”。ETF是一种指数投资工具&#xff0c;通过复制标的指数来构建跟踪指数变化的组合证券&#xff0c;使得投资者通过买卖一种产品就实现了一揽子证券的交易。简单来说…

TCP Keepalive 和 HTTP Keep-Alive

HTTP 的Keep-Alive 在 HTTP 1.0 中默认是关闭的&#xff0c;如果浏览器要开启 Keep-Alive&#xff0c;它必须在请求的包头中添加&#xff1a; Connection: Keep-Alive然后当服务器收到请求&#xff0c;作出回应的时候&#xff0c;它也添加一个头在响应中&#xff1a; Connec…

xlsx处理库对比总结

XInt libxlsxwriter 只能用于创建 XLSX 文件&#xff0c;不支持读取或修改现有的 Excel 文件。 OpenXLSX 主要用于R语言。 中文需处理编码&#xff1a;https://blog.csdn.net/u010986241/article/details/105044929 LibXL 收费 xlslib 只能写Excel文件 libxls 只能读…

相信未来:技术的进步意味着重构

十年以来&#xff0c;呼声最高&#xff1a;AI、BigData、Cloud Service。 以本人看来&#xff0c;仅AI技术的进步和应用&#xff0c;整个软件行业&#xff0c;所有软件将被重构。 提醒&#xff1a;非大学毕业、非计算机及相关专业&#xff0c;在IT这个行业&#xff0c;特别是…

主流开发语言和开发环境:探索编程世界的基础

在当今这个快速发展的技术时代&#xff0c;软件开发已经成为推动创新的重要力量。无论是构建下一代应用、开发先进的算法还是创建复杂的系统&#xff0c;选择合适的编程语言和开发环境都是至关重要的。在本文中&#xff0c;我们将探讨当前流行的几种主流开发语言以及它们常用的…

MATLAB使用绘图plot制作动态GIF

文章目录 1 前言2 DemoDemo 1 - 不使用函数Demo 2 - 使用函数 1 前言 在PPT展示或者博客创作中&#xff0c;有时需要插入动态图如GIF&#xff0c;来演示算法效果或者结果。在MATLAB中&#xff0c;可以通过一些代码&#xff0c;将绘图plot转化为动态的GIF。 其大致方法为&…

【MySQL】如何理解事务

一、引出事务 假设我们有一张用户表&#xff0c;如图所示&#xff1a; 我们现在的需求是&#xff1a;小红向小明转账100块 那么我们可以执行如下指令&#xff1a; update user set salary salary-100 where id1;//第一条语句小红转一百 update user set salary salary100 …

学习使用在mysql中查询指定字段字符串包含多个字符串的方法

学习使用在mysql中查询指定字段字符串包含多个字符串的方法 使用LIKE关键字使用REGEXP关键字使用FIND_IN_SET函数使用INSTR函数和AND关键字 使用LIKE关键字 SELECT * FROM table_name WHERE column_name LIKE %string1% AND column_name LIKE %string2%;使用LIKE关键字&#x…

C++ Linux:常用的文件、目录操作命令使用

在面试中&#xff0c;掌握基本的文件和目录操作命令是非常重要的&#xff0c;尤其是在Unix或Linux环境下。这些命令不仅在日常工作中非常实用&#xff0c;也能体现出你对操作系统的熟练程度。以下是一些常用的文件和目录操作命令及其用法的详细说明&#xff1a; 1. 文件操作命…

webpack简单配置(基于vue3配置)

首先创建webpack.config.js他和src平级 基础配置&#xff08;具体根据项目而言&#xff09; const path require(path); // 引入Node.js的path模块&#xff0c;用于处理文件路径 const { VueLoaderPlugin } require(vue-loader); // 引入Vue Loader插件&#xff0c;用于处理…

RabbitMQ(一):消息队列MQ

目录 1 消息队列MQ1.1 MQ简介1、什么是MQ2、MQ的优势流量削峰应用解耦异常处理数据分发分布式事务 3、消息中间件的弊端4、常用的MQ 1.2 MQ中几个基本概念1.3 MQ的通信模式1.4 消息的发布策略1.5 常用消息中间件协议1、AMQP协议2、MQTT协议3、OpenMessage协议4、kafaka协议 1 消…

uview组件封装form表单后有关弹框的组件安卓部分机型不显示

环境背景介绍: 使用uniapp开发小程序和app , uview版本是 1.8.3 , 分别为ios端安卓端和小程序端 封装了form表单组件,u-select u-action-sheet u-picker 等组件通过 u-input click事件唤起 <u-form-item :key"item.key" :label"$t(item.label)" :…

TiDB 社区智慧合集丨TiDB 相关 SQL 脚本大全

非常感谢各位 TiDBer 在之前 【TiDBer 唠嗑茶话会 48】非正式 TiDB 相关 SQL 脚本征集大赛&#xff01;( https://asktug.com/t/topic/996635 )里提供的各种常用脚本。 在这篇文章中&#xff0c;我们整理了社区同学提供的一系列 TiDB 相关 SQL 脚本&#xff0c;希望能为大家在…

APP被针对攻击了,要怎么解决

随着APP行业的兴起&#xff0c;游戏公司异军突起&#xff0c;不管是在控证还是攻击方面都是属于最复杂的一个场面&#xff0c;游戏APP逐渐成为DDOS流量攻击的“重灾区”。没有提前做好了解就盲目进军游戏APP行业&#xff0c;一旦被攻击就会让公司束手无策。那么&#xff0c;刚上…

OpenAI视频生成模型Sora的全面解析:从ViViT、Diffusion Transformer到NaViT、VideoPoet

前言 真没想到&#xff0c;距离视频生成上一轮的集中爆发(详见《Sora之前的视频生成发展史&#xff1a;从Gen2、Emu Video到PixelDance、SVD、Pika 1.0》)才过去三个月&#xff0c;没想OpenAI一出手&#xff0c;该领域又直接变天了 自打2.16日OpenAI发布sora以来(其开发团队包…

数据保护:如何有效应对.BecSec-P-XXXXXXXX勒索病毒的威胁

导言&#xff1a; 随着网络安全威胁的不断增加&#xff0c;勒索软件成为了网络犯罪分子的一种常见手段之一。.BecSec-P-XXXXXXXX勒索病毒&#xff08;简称.BecSec勒索病毒&#xff09;作为其中之一&#xff0c;对用户的数据安全构成了严重威胁。本文91数据恢复将介绍.BecSec勒…

ubuntu20.04 安装 matlab R2023b

ubuntu20.04 使用matlab R2023b 起因步骤问题问题1问题2问题3 起因 闲着没事&#xff0c;想在ubuntu上安装matlab。 步骤 这个博客写得很好&#xff0c;我就不赘述了&#xff1a;参考博客 。但有点不一样&#xff1a;我现在matlab官网上下载的linux版本不是iso镜像文件&…