当前位置：首页 > news >正文

前端表格滑动滚动条太费事，做个浮动滑动插件

news 来源：原创 2025/6/27 23:55:14

比如下面的表格，因为滚动条样式设计得很窄，所以用鼠标滑动起来很费劲

<template><el-table:data="tableData"style="width: 600px"height="250"><el-table-columnfixedprop="date"label="日期"width="150"></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="province"label="省份"width="120"></el-table-column><el-table-columnprop="city"label="市区"width="120"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="zip"label="邮编"width="120"></el-table-column></el-table>
</template><script>export default {data() {return {tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}]}}}
</script>
<style>
::-webkit-scrollbar-track {box-shadow: rgb(255, 255, 255) 0px 0px 0.27778rem inset;background: rgb(255, 255, 255);border-radius: 0.55556rem;
}
::-webkit-scrollbar-thumb {background: rgb(199, 0, 25);border-radius: 0.55556rem;
}
::-webkit-scrollbar {height: 0.33333rem;width: 0.33333rem;
}
</style>

使滚动条向左移，可以使用下面两种方法

document.getElementsByClassName('el-table__body-wrapper')[0].scrollLeft += 120
// el-table 方法
this.$refs.elTable.$refs.bodyWrapper.scrollLeft += 120

再添加按钮可拖动功能

<template><div style="text-align: left;vertical-align: top;"><div ref="dialog" class="dialog-header" @mousedown="startDrag($event)"><el-button type="success" icon="el-icon-arrow-left" circle @click="leftClick"></el-button><el-button type="success" icon="el-icon-arrow-right" circle @click="rightClick"></el-button></div><el-table :data="tableData" ref="elTable" style="width: 600px" height="250"><el-table-column fixed prop="date" label="日期" width="150"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="province" label="省份" width="120"></el-table-column><el-table-column prop="city" label="市区" width="120"></el-table-column><el-table-column prop="address" label="地址" width="300"></el-table-column><el-table-column prop="zip" label="邮编" width="120"></el-table-column></el-table></div>
</template><script>
export default {data() {return {tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}],isDragging: false,offsetX: 0,offsetY: 0}},methods: {leftClick() {// document.getElementsByClassName('el-table__body-wrapper')[0].scrollLeft -= 120this.$refs.elTable.$refs.bodyWrapper.scrollLeft -= 120},rightClick() {this.$refs.elTable.$refs.bodyWrapper.scrollLeft += 120},startDrag(event) {this.isDragging = true;this.offsetX = event.clientX - this.$refs.dialog.offsetLeft;this.offsetY = event.clientY - this.$refs.dialog.offsetTop;document.addEventListener('mousemove', this.drag);document.addEventListener('mouseup', this.stopDrag);},drag(event) {if (this.isDragging) {this.$refs.dialog.style.left = event.clientX - this.offsetX + 'px';this.$refs.dialog.style.top = event.clientY - this.offsetY + 'px';}},stopDrag() {this.isDragging = false;document.removeEventListener('mousemove', this.drag);document.removeEventListener('mouseup', this.stopDrag);}}
}
</script>
<style>
::-webkit-scrollbar-track {box-shadow: rgb(255, 255, 255) 0px 0px 0.27778rem inset;background: rgb(255, 255, 255);border-radius: 0.55556rem;
}::-webkit-scrollbar-thumb {background: rgb(199, 0, 25);border-radius: 0.55556rem;
}::-webkit-scrollbar {height: 0.33333rem;width: 0.33333rem;
}.dialog-header {cursor: move;background-color: #f0f0f0;padding: 5px;position: absolute;z-index: 5;
}
</style>

最终效果：

前端表格滑动滚动条太费事，做个浮动滑动插件

比如下面的表格，因为滚动条样式设计得很窄，所以用鼠标滑动起来很费劲 <template><el-table:data"tableData"style"width: 600px"height"250"><el-table-columnfixedprop"date"label"日期&…...

编程日记 2025/6/27 23:55:14

基于自校准分数的扩散模型在并行磁共振成像中联合进行线圈灵敏度校正和运动校正|文献速递-深度学习医疗AI最新文献

Title 题目 Joint coil sensitivity and motion correction in parallel MRI with aself-calibrating score-based diffusion model 基于自校准分数的扩散模型在并行磁共振成像中联合进行线圈灵敏度校正和运动校正 01 文献速递介绍磁共振成像（MRI）…...

编程日记 2025/6/27 23:07:01

【CUDA】Sgemm单精度矩阵乘法（上）

目录前言1. 简述2. 框架搭建和CPU串行实现3. baseline算法：global memory4. 优化技巧1：shared memory5. 优化技巧2：shared memory sliding window6. 优化技巧3：增加每个线程的工作量7. 优化技巧4：使用float4提高读取…...

编程日记 2025/6/27 22:38:06

Linux proc文件系统内存影射

文章目录常见的内存分配函数/proc/pid/ 目录解析用户进程的内存空间分配算法mmap 分配大内存可能不在堆中换为 malloc 现象相同常见的内存分配函数 malloc / calloc / realloc（来自 C 标准库） void *malloc(size_t size)：分配 size 字节…...

编程日记 2025/6/27 22:33:21

服务器时间发生跳变导致hghac中对应主机状态频繁切换为crash或stop

文章目录环境症状问题原因解决方案相关文档报错编码环境系统平台：N/A 版本：N/A 症状集群状态： [rootbthbj-hgywsjkjq-ip28-cen76 ~]# hghactl list Cluster: highgo-ee-cluster —---------------------—---------- | Member | Ho…...

编程日记 2025/6/27 22:42:19

“智”造升级：金众诚如何赋能重型机械企业高效项目管理？

据悉，由中国重型机械工业协会主办的2025中国（郑州）重型机械装备展览会（以下简称：重型机械装备展），将于2025年10月15-17日在河南省郑州市中原国际会展中心隆重举办。作为中国重型机械行业唯一的…...

编程日记 2025/6/27 2:16:49

反向操作：如何用AI检测工具优化自己的论文“人味”？

大家好，这里是论文写手的一线自救指南😤 在AIGC横行的今天，谁还没偷偷用过AI写几段论文内容？但问题来了：学校越来越会“识AI”了！ 有的学校甚至不看重复率，只盯AIGC率报告，一句“AI…...

编程日记 2025/6/25 11:59:29

前端面试宝典---js垃圾回收机制

什么是垃圾回收垃圾回收是指一种自动内存管理机制，当声明一个变量时，会在内存中开辟一块内存空间用于存放这个变量。当这个变量被使用过后，可能再也不需要它了，此时垃圾回收器会自动检测并回收这些不再使用的内存空间。垃圾回收…...

编程日记 2025/6/27 23:05:31

【docker】--容器管理

文章目录容器重启--restart 参数选项及作用**对比 always 和 unless-stopped****如何查看容器的重启策略？** 容器重启 –restart 参数选项及作用重启策略 no：不重启（默认）。on-failure：失败时重启（可限…...

编程日记 2025/6/27 23:10:04

如何下载和安装 Ghost Spectre Windows 11 24H2 PRO

如何下载和安装 Ghost Spectre Windows 11 24H2 PRO 我们都希望拥有一台运行速度飞快的电脑系统，但对于那些使用普通硬件的用户来说，这并不总是可能的。所以，如果你觉得你的 Windows 11 电脑运行缓慢，你并不孤单。许多用户，包括 Reddit 和 YouTube 上的技术爱好者，都在放…...

编程日记 2025/6/27 18:35:49

软考软件设计师中级——软件工程笔记

1.软件过程 1.1能力成熟度模型（CMM） 软件能力成熟度模型（CMM）将软件过程改进分为以下五个成熟度级别，每个级别都定义了特定的过程特征和目标： 初始级 (Initial)： 软件开发过程杂乱无章&#xf…...

编程日记 2025/6/26 20:37:05

有关多线程

一、多线程到底是什么？简单说一说你可以把程序想象成一台工厂。单线程就是工厂里只有一个员工，他做事情、搬产品、打包都靠一个人，他忙起来速度会慢一些。而多线程就像有多个员工同时工作，他们各自干自己的事情，整体…...

编程日记 2025/6/26 23:55:07

静电的起因与静电效应：技术分析与应用

杭州干扰净电子科技有限公司出品： 静电（Electrostatics）是由于电荷积累或转移引起的现象，广泛存在于日常生活和工业环境中。静电的起因主要包括接触起电、摩擦起电和感应起电，而其效应可能引发静电放电（ES…...

编程日记 2025/6/27 21:44:10

Python知识框架

一、Python基础语法变量与数据类型变量命名规则基本类型：int, float, str, bool, None 复合类型：list, tuple, dict, set 类型转换与检查（type(), isinstance()） 运算符算术运算符：, -, *, /, //, %, ** 比较…...

编程日记 2025/6/27 23:05:32

1、protobufjs7.4.0 postinstall: node scripts/postinstall verbose stack Error: protobufjs7.4.0 postinstall: node scripts/postinstall 确认是否有postinstall# node scripts/postinstallCannot find module /home/rio/scripts/postinstall解决办法： # 添加…...

编程日记 2025/6/27 19:39:35

ESP32WIFI工具加透传

工欲善其事，必先利器其器项目首页 - ESP-12F烧录使用软件与说明书:ESP-12F 烧录使用软件与说明书本仓库提供了ESP-12F模块的烧录使用软件及相关说明书，帮助用户快速上手并使用ESP-12F模块进行开发 - GitCode ATCWMODE 是 ESP32 系列芯片中用于设置 Wi…...

编程日记 2025/6/27 23:48:26

44、私有程序集与共享程序集有什么区别？

私有程序集（Private Assembly）与共享程序集（Shared Assembly）是.NET框架中程序集部署的两种不同方式，它们在部署位置、版本控制、访问权限等方面存在显著差异，以下是对二者的详细比较： 1. 部署…...

编程日记 2025/6/27 22:55:42

Hadoop集群故障节点隔离操作指南

一、确认故障节点状态 1‌.查看集群节点状态 hdfs dfsadmin -report # 显示所有DataNode状态（存活/宕机/存储利用率）输出中标记为 Dead 或 Decommissioning 的节点为异常节点。 ‌ 2.分析监控指标通过Prometheus/Grafana监控平台检查节点资源（CPU、内存、磁盘I…...

编程日记 2025/6/27 22:34:53

流速仪数据处理及流量断面线绘制

1 需求描述在实际航道测量项目中，有测量断面线流量流速的需求，得使用流速仪在现场进行测量，相关操作在之前已经写了记录。本次手册记录后期数据处理与流量线绘制，以该区域为例。流速仪设备操作说明 2 规范要求 3 流量断面表格…...

编程日记 2025/6/25 22:57:12

android实现USB通讯

在 Android 上枚举 USB 设备除了使用 UsbManager.getDeviceList() 方法外，还有以下几种常见的方式： 1. 使用 USB 设备过滤器（XML 配置） 通过在 AndroidManifest.xml 中配置 USB 设备过滤器，可以让系统自动检测并通知…...

编程日记 2025/6/24 14:05:10

公链开发及其配套设施:钱包与区块链浏览器

公链开发及其配套设施：钱包与区块链浏览器的技术架构与生态实践 ——2025年区块链基础设施建设的核心逻辑与创新突破一、公链开发：构建去中心化世界的基石 1. 技术架构设计的三重挑战公链作为开放的区块链网络，需在性能、安全性与去中心…...

编程日记 2025/6/23 12:14:48

SVM在医疗设备故障维修服务决策中的应用：策略、技术与实践

SVM在医疗设备故障维修服务决策中的应用：策略、技术与实践医疗设备的高可靠性、安全性及严格合规性要求，使其故障维修决策具有显著的特殊性。支持向量机（SVM）凭借小样本学习、非线性建模及高精度分类能力，可有效解决…...

编程日记 2025/6/27 2:14:01

如何高效集成MySQL数据到金蝶云星空

MySQL数据集成到金蝶云星空：SC采购入库-深圳天一-OK案例分享在企业信息化建设中，数据的高效流转和准确对接是实现业务流程自动化的关键。本文将聚焦于一个具体的系统对接集成案例——“SC采购入库-深圳天一-OK”，详细探讨如何通过轻易云数据…...

编程日记 2025/6/23 15:39:56

NACOS基于长链接的⼀致性模型

1. 配置⼀致性模型 sdk-server ⼀致性 server 间⼀致性 Server 间同步消息接收处理轻量级实现，重试失败时，监控告警。断网：断网太久，重试任务队列爆满时，无剔除策略。 2. 服务⼀致性模型...

编程日记 2025/6/23 14:59:02

Docker 常见问题及其解决方案

一、安装与启动问题 1.1 安装失败在不同操作系统上安装 Docker 时，可能会出现安装失败的情况。例如，在 Ubuntu 系统中，执行安装命令后提示依赖缺失。这通常是因为软件源配置不正确或系统缺少必要的依赖包。解决方案： 确保系统…...

编程日记 2025/6/25 20:39:24

Nginx 动静分离在 ZKmall 开源商城静态资源管理中的深度优化

在 B2C 电商高并发场景下，静态资源（图片、CSS、JavaScript 等）的高效管理直接影响页面加载速度与用户体验。ZKmall开源商城通过对 Nginx 动静分离技术的深度优化，将静态资源响应速度提升 65%，带宽成本降低 40%&#xf…...

编程日记 2025/6/26 21:36:15

Lighthouse 自定义审计

以下是关于 Lighthouse 自定义审计的基本知识点总结：一、Lighthouse 自定义审计核心概念 1. 审计机制架构 #mermaid-svg-lzu9WEel4gUome5N {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-lzu9WEel4gUome5N .erro…...

编程日记 2025/6/25 0:01:25

龙虎榜——20250514

上证日线收阳线，大盘股相对强势，整体跌多涨少，量能较昨日放大，大金融发力，但总体处于日线上涨末端，注意风险。深证日线冲高回落，触及前期压力位，量能未放大，总体处于日…...

编程日记 2025/6/23 13:50:31

基于javaweb的SpringBoot自习室预约系统设计与实现(源码+文档+部署讲解）

技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…...

编程日记 2025/6/23 13:49:32

二分查找的边界问题

前言二分查找(Binary Search)是一种高效的查找算法，时间复杂度为O(log n)。它适用于已排序的数组或列表。本文将详细介绍二分查找的两种常见写法：闭区间写法和左闭右开区间写法。一、二分查找基本思想二分查找的核心思想是"分而治之"&am…...

编程日记 2025/6/24 15:01:46

应用示例1：交通灯

基于FPGA的交通灯控制系统实现原理详解目录基于FPGA的交通灯控制系统实现原理详解一、项目简介二、数字电路与基础知识1. 交通灯系统的有限状态机（FSM）2. 数码管显示原理3. 二进制转BCD显示4. 时钟与分频三、功能需求与系统结构功能需求系统结构四、各模块设计原理说明1. 时…...

编程日记 2025/6/24 14:10:50

Docker 介绍与使用

Docker 文章目录 Docker介绍与虚拟机的比较启动速度占用资源优势更容易迁移更容易维护更容易扩展使用场景持续集成提供可伸缩的云服务搭建微服务架构镜像与容器镜像构成（分层结构）镜像与容器的区别安装 Docker常用命令介绍镜像相关容器相关实战&…...

编程日记 2025/6/27 8:30:16

[数据结构]6. 队列-Queue

队列-Queue 1. 介绍2. 队列实现2.1 基于链表的实现2.2 基于数组的实现 3. 队列操作CreateInitializeDestoryPushPopFrontBackSizeEmpty 1. 介绍队列（queue） 是一种遵循先入先出规则的线性数据结构。将队列头部称为“队首”，尾部称为“队尾”…...

编程日记 2025/6/24 21:25:02

mybatis plus (sqlserver) 根据条件来获取id最大的，或者是新增的最新的一条记录（同条件可能会有多条出现）

1、mysql的版本 limit 1 QueryWrapper<Userinfo> queryWrapper new QueryWrapper<>();queryWrapper.eq("fid", payment.getFid());return userinfoMapper.selectOne(queryWrapper.orderByDesc("id").last("limit 1")); 只要类似以…...

编程日记 2025/6/27 9:32:33

打卡DAY25

DAY 25 异常处理知识点回顾： 1. 异常处理机制 2. debug过程中的各类报错 3. try-except机制 4. try-except-else-finally机制在即将进入深度学习专题学习前，我们最后差缺补漏，把一些常见且重要的知识点给他们补上，加深…...

编程日记 2025/6/26 7:23:25

【C语言指针超详解(六)】--sizeof和strlen的对比，数组和指针笔试题解析，指针运算笔试题解析

目录一.sizeof和strlen 1.1--sizeof 1.2--strlen 1.3--sizeof和strlen的对比二.数组和指针笔试题解析 2.1--一维数组 2.2--字符数组 2.2.1--代码1： 2.2.2--代码2： 2.2.3--代码3： 2.2.4--代码4 ： 2.2.5--代码5&#…...

编程日记 2025/6/25 6:42:02

Java 异常处理之 BufferUnderflowException（BufferUnderflowException 概述、常见发生场景、避免策略）

一、BufferUnderflowException 概述 BufferUnderflowException 是 Java NIO 包中的一个运行时异常，是 RuntimeException 的子类 public class BufferUnderflowException extends RuntimeException {... }# 继承关系java.lang.Object-> java.lang.Throwable->…...

编程日记 2025/5/29 14:00:27

OpenCV人脸识别LBPH算法原理、案例解析

文章目录前言一、LBPH 算法原理概述1、LBP 特征计算2、均匀模式与旋转不变性3、直方图统计与识别二、环境准备1、安装依赖2、数据集结构三、代码实现（完整代码约 150 行）1、导入库与配置2、加载数据与标签生成3、模型训练与保存4、实时人脸识别5、主…...

编程日记 2025/6/27 2:09:42

Lightpanda开源浏览器：专为 AI 和自动化而设计的无界面浏览器

一、软件介绍文末提供程序和源码下载 Lightpanda开源浏览器：专为 AI 和自动化而设计的无界面浏览器； Javascript execution Javascript 执行Support of Web APIs (partial, WIP)支持 Web API（部分、WIP）Compatible with Pla…...

编程日记 2025/6/27 14:14:06

Docker 疑难杂症解决指南：从入门到进阶的全面剖析

Docker 作为容器化技术的代表，凭借其轻量级、可移植性和高效资源利用率，已成为开发、测试和部署应用的标准工具。然而，在实际使用中，用户常常会遇到镜像构建失败、容器启动异常、网络配置问题等疑难杂症。本文将从镜像构建、容器生…...

编程日记 2025/6/26 9:52:11

CodeBuddy Craft，我的编程搭子

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴你好，我是悟空。背景最近项目组事情挺多，一个人要干多个人的活，而且写…...

编程日记 2025/6/25 5:20:39

如何实现一个运动会计分系统？（C语言版）

一、需求分析设计一个运动会计分系统，计分信息包括参加学校，参与项目，性别，名次个数，各个学校获得名次信息。该系统具有以下功能数据录入: 链表或结构体数组组织数据数据报表: 依照规定的报表格式对数据打印报表数据排序: 按照要求对数据进行统计，含简单统计及综合统计…...

编程日记 2025/6/26 22:01:36

linux内核主要由哪五个模块构成？

Linux内核是一个高度模块化的系统，其核心功能通常被划分为以下五大模块，共同协作实现操作系统的基础功能： 1. 进程管理（Process Management） 核心功能：负责进程的创建、调度、终止，以…...

编程日记 2025/6/4 12:15:35

编程日志5.5

树的结构代码 #include<iostream> using namespace std; //由于树的每个结点可能有一些孩子结点，这些孩子结点的数量不确定，所以可以用一个链表来把所有的孩子结点给串起来 //链表结点定义 //这段代码定义了一个结构体ListNode，用于表示链表中的一个结点。这个结构…...

编程日记 2025/6/27 2:10:29

React学习———React.memo、useMemo和useCallback

React.memo React.memo是React提供的一个高阶组件，用于优化函数组件的性能，它通过记忆组件的渲染结果，避免在父组件重新渲染时，子组件不必要的重新渲染 React.memo会对组件的props进行浅比较，如果props没有变化&#…...

编程日记 2025/6/25 11:49:25

OpenCV实现数字水印的相关函数和示例代码

OpenCV计算机视觉开发实践：基于Qt C - 商品搜索 - 京东实现数字水印的相关函数用OpenCV来实现数字水印功能，需要使用一些位操作函数，我们需要先了解一下这些函数。 1. bitwise_and函数 bitwise_and函数是OpenCV中的位运算函数之一&…...

编程日记 2025/6/24 17:27:33

【CUDA】Sgemm单精度矩阵乘法（下）

目录前言1. 优化技巧5：使用register模拟二级缓存（内积转外积）2. 优化技巧6：使用register模拟二级缓存 float43. 优化技巧7：global memory转置再存放shared memory4. 优化技巧8：使用double buffer加速矩阵…...

编程日记 2025/6/23 4:13:48

cursor 学习

参考：AI编程神器！Cursor无限续杯！白嫖白嫖！！！...

编程日记 2025/6/23 1:37:13

学术论文的科研流程概述视频会议记录

CCF-Talk SPP131期浙江大学研究员彭思达的报告。举例视频生成要多快好省。提升代码能力：先明白基础的函数，可以复现一个网络。最好是实现一个操作系统。...

编程日记 2025/6/26 12:38:16

【Linux笔记】——Linux线程理解与分页存储的奥秘

🔥个人主页🔥：孤寂大仙V 🌈收录专栏🌈：Linux 🌹往期回顾🌹：【Linux笔记】——进程信号的捕捉——从中断聊聊OS是怎么“活起来”的 🔖流水不争，争的…...

编程日记 2025/6/25 11:40:40

相关文章：