element-ui组件table去除下方滚动条,实现鼠标左右拖拽移动表格

时隔多日,再次遇到值得记录的问题。

需求

项目前端使用vue框架,页面使用element-ui进行页面快速搭建。默认的table组件当表格过长时,下方会出现横向的滚动条,便于用户对表格进行左右滑动。考虑到页面美观问题,滚动条设置的很窄,导致用户使用时不方便进行左右滑动。
现要求,去除表格下方滚动条,用户可直接拖拽表格实现左右滑动功能。

思路

鼠标点击进行拖拽,首先想到鼠标的点击事件,添加mousedownmouseleavemouseupmousemove事件的监听器,实现拖拽效果。通过设置tableBodyWrapper.style.overflow = 'hidden';隐藏原生的滚动条。

实现

要实现拖拽功能,并确保 tableBodyWrapper 可以正确拖拽,需要设置事件监听器和对样式进行一些调整。下面是实现代码:

  <template><div ref="tableContainer" class="table-container"><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></div></template><script>
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]};},mounted() {this.enableDrag();},methods: {enableDrag() {this.$nextTick(() => {const tableContainer = this.$refs.tableContainer;const tableBodyWrapper = this.$refs.table.$el.querySelector('.el-table__body-wrapper');if (!tableBodyWrapper) {console.error('找不到表体。');return;}let isDown = false;let startX, scrollLeft;tableBodyWrapper.addEventListener('mousedown', (e) => {isDown = true;startX = e.pageX - tableBodyWrapper.offsetLeft;scrollLeft = tableBodyWrapper.scrollLeft;tableBodyWrapper.style.cursor = 'grabbing';});tableBodyWrapper.addEventListener('mouseleave', () => {isDown = false;tableBodyWrapper.style.cursor = 'grab';});tableBodyWrapper.addEventListener('mouseup', () => {isDown = false;tableBodyWrapper.style.cursor = 'grab';});tableBodyWrapper.addEventListener('mousemove', (e) => {if (!isDown) return;e.preventDefault();const x = e.pageX - tableBodyWrapper.offsetLeft;const walk = (x - startX) * 2; // scroll-fasttableBodyWrapper.scrollLeft = scrollLeft - walk;});// 隐藏滚动条tableBodyWrapper.style.overflowX = 'hidden';});}}
};
</script><style>
.table-container {overflow: hidden;white-space: nowrap;
}.el-table__body-wrapper {cursor: grab;
}.el-table__body-wrapper:active {cursor: grabbing;
}
</style>

解释:

  • 获取DOM元素:在this.$nextTick()回调中,通过this.$refs.table.$el.querySelector('.el-table__body-wrapper')获取到实际的表格内容区域的DOM元素。这样就确保我们在对DOM元素进行操作,而不是组件实例。
  • 检查 DOM 元素存在:在 this.$nextTick 中,我们先检查 tableElement 是否存在,然后再查询 tableBodyWrapper
  • 添加错误处理:如果 tableBodyWrapper 没有找到,输出错误信息到控制台。这有助于调试并确保代码的稳健性。
  • 拖拽事件绑定到 tableBodyWrapper:确保拖拽事件绑定在实际可滚动的 tableBodyWrapper 上。
  • 样式调整:使用 tableBodyWrapper 的样式来显示抓手光标,并在拖动时切换光标样式。
  • 隐藏水平滚动条:通过设置 overflowX: hidden 来隐藏原生滚动条,但确保滚动功能仍然有效。

表格设置固定表头和列,实践证明并不影响此功能。

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

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

相关文章

【源码】6语言跨境电商PHP源码 精美UI+功能强大开源无授权

6语言跨境电商PHP源码 精美UI功能强大开源无授权 英文&#xff0c;简体中文&#xff0c;繁体中文&#xff0c;日语、泰语、越南语6语言。功能非常强大&#xff0c;UI也很漂亮的跨境电商源码。基于国外成熟电商系统二开的源码&#xff0c;带POS系统。 系统采用Laravel框架开发…

面试专区|【DevOps-20道Logstash高频题整理(附答案背诵版)】

简述什么是Logstash &#xff1f; Logstash是一个开源的数据收集引擎&#xff0c;具备实时管道处理能力。它可以从多个来源采集数据&#xff0c;进行转换&#xff0c;然后将数据发送到指定的存储库。官方介绍Logstash为“具备实时数据传输能力的管道”&#xff0c;能将数据从输…

常见文本分类小模型

1.TextRNN 模型结构&#xff1a;embedding BiLSTM linear 2.FastText 模型结构&#xff1a;mean(3✖️embedding) linear 3.TextRCNN 模型结构&#xff1a;embedding BiLSTM Maxpool linear 4.TextCNN 模型结构&#xff1a;embedding 3✖️(conv Maxpool) line…

[C][符号]详细讲解

目录 1.算术操作符2.接续符和转义符 \1.续行符使用2.转义 3.单引号和双引号4.逻辑运算符5.位运算符6.移位操作符7. --操作8.条件操作符9.逗号表达式10.操作符的属性 1.算术操作符 算术操作符&#xff1a; - * / %除了%操作符以外&#xff0c;其他的几个操作符可以作用于整数和…

【WEB前端2024】开源智体世界:乔布斯3D纪念馆-第31课-循环动画

【WEB前端2024】开源智体世界&#xff1a;乔布斯3D纪念馆-第31课-循环动画 使用dtns.network德塔世界&#xff08;开源的智体世界引擎&#xff09;&#xff0c;策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界引擎&am…

科学技术创新杂志科学技术创新杂志社科学技术创新编辑部2024年第10期目录

科技创新 单桩穿越岩溶发育地层力学特征与溶洞处置措施研究 刘飞; 1-7《科学技术创新》投稿&#xff1a;cnqikantg126.com 基于多目标优化的中低压配电网电力规划研究 向星山;杨承俊;张寒月; 8-11 激光雷达测绘技术在工程测绘中的应用研究 张军伟;闫宏昌; 12-15 …

Python爬虫技术深度解析与实战案例

一、引言 随着互联网的快速发展&#xff0c;网络数据已成为人们获取信息、进行研究的重要资源。Python作为一种功能强大且易于学习的编程语言&#xff0c;在爬虫领域有着广泛的应用。本文将详细介绍Python爬虫技术的基本原理、核心组件&#xff0c;并通过一个实战案例展示Pyth…

LeetCode516:最长回文子序列

题目描述 给你一个字符串 s &#xff0c;找出其中最长的回文子序列&#xff0c;并返回该序列的长度。 子序列定义为&#xff1a;不改变剩余字符顺序的情况下&#xff0c;删除某些字符或者不删除任何字符形成的一个序列。 代码 /*dp[i][j]&#xff1a;[i,j]的回文子序列长度为d…

泰迪智能科技数据分析工程师项目班(线上班)课程安排介绍

泰迪智能科技数据分析工程师项目班旨在帮助学员掌握数据分析的基本理论和实践技能&#xff0c;通过理论教学和实践项目结合&#xff0c;全面提升学员的数据分析能力。 数据分析工程师项目班课程特色&#xff1a; 1.课程内容前沿&#xff0c;实用性强 课程…

51 html网页

上节内容的网页是hello world的字符串&#xff0c;但实际上网页应该是html格式的这种超文本标记语言&#xff0c;这一节完善一下网页的各种格式和内容 分文件 实际服务器中&#xff0c;网页的界面应该单独放一个文件&#xff0c;服务器从文件里读取网页的内容 先创建一个wroo…

QT学习备份

2023年1月2日09:00:32 1.信号/槽编辑器 发送者&#xff1a;控件 信号&#xff1a;是控件发出的信号 接受者&#xff1a;包含控件的容器 槽&#xff1a;程序上用slot标识的方法 2.Q_OBJECT宏 只有继承了QObject类的类&#xff0c;才具有信号槽的能力。所以&#xff0c;为了使用…

uniapp实现蓝牙自动连接并获取心电图(代码篇)

我们最近的项目是需要写一个app和公司设备通过蓝牙连接&#xff0c;并且获取到心电图&#xff0c;这次是实现自动的&#xff0c;用户在第一次的时候需要点击连接蓝牙实现自动连接&#xff0c;后续更是不需要点击直接获取心电图&#xff0c;直接上代码&#xff0c;供大家参考&am…

【管理咨询宝藏118】集团公司人力资源共享服务中心建设方案

本报告首发于公号“管理咨询宝藏”&#xff0c;如需阅读完整版报告内容&#xff0c;请查阅公号“管理咨询宝藏”。 【管理咨询宝藏118】集团公司人力资源共享服务中心建设方案 【格式】PDF版本 【关键词】人力资源、共享服务、顶级咨询 【核心观点】 - 本项目立足集团公司的人…

学生信息管理系统(静态版)

系统的主界面 系统的操作指令 结构体的创建 目录 1、学生信息的输入 2、学生信息的添加 3、学生信息的删除 4、学生信息的查找&#xff0c;找到并显示 *判断查找函数3和4和5共用 5、学生信息的修改 6、显示学生的信息 7、学生成绩的排序,并打印(代码中有快排和冒…

智慧冶金:TSINGSEE青犀AI+视频技术助力打造高效、安全的生产环境

一、建设背景 冶金行业因其特殊的生产环境和工艺要求&#xff0c;对安全生产、环境保护以及质量监控等方面有着极高的要求。因此&#xff0c;将视频智能监控技术引入冶金行业&#xff0c;不仅有助于提升生产效率&#xff0c;更能有效保障生产安全&#xff0c;降低事故风险。 …

Python + adb 实现打电话功能

前言 其实很多年前写过一篇python打电话的功能&#xff0c;链接如下&#xff1a; Python twilio 实现打电话和发短信功能_自动发短信代码-CSDN博客 今天由于工作需要&#xff0c;又用python写了个关于打电话的小工具&#xff0c;主要是通过ADB方式实现的 实现过程 1.先利用…

计算机图形学入门02:线性代数基础

1.向量&#xff08;Vetors&#xff09; 向量表示一个方向&#xff0c;还能表示长度&#xff08;向量的摸&#xff09;。一般使用单位向量表示方向。 向量加减&#xff1a;平行四边形法则、三角形法则。比卡尔坐标系描述向量&#xff0c;坐标直接相加。 1.1向量点乘&#xff08;…

图片怎么批量重命名从1到50?这3个方法一键改名

图片怎么批量重命名从1到50&#xff1f;图片批量重命名从1到50的过程不仅提高了我们处理大量图片文件的效率&#xff0c;还大大简化了命名过程&#xff0c;让我们能更加有条理地管理和存储图片。通过使用各种专业的工具和方法&#xff0c;我们可以轻松实现图片文件的自动化命名…

光纤网络发展(光缆主动监测系统解决方案)

随着光缆网络规模的迅速扩大&#xff0c;如何提高网络运营效益就显得尤为重要。一方面需要及时掌握网络的运行状况&#xff0c;在发生劣化或故障时&#xff0c;能够准确定位&#xff0c;缩短排障历时&#xff1b;同时&#xff0c;一条光缆从设计、施工到维护&#xff0c;积累了…

聊聊异常处理及try-catch-finally块的作用

异常处理&#xff08;Exceptional Handling&#xff09;&#xff0c;又称为错误处理&#xff0c;是编程语言或计算机硬件中用于处理软件或信息系统中出现的异常状况的一种机制。这些异常状况通常指的是超出程序正常执行流程的某些特殊条件。异常处理提供了处理程序运行时出现的…