【element-ui】el-table横向滚动后,通过is-scrolling-left获取滚动高度失效的问题

el-table横向滚动后,通过is-scrolling-left获取滚动高度失效的问题

需求

现在有一个需求,需要监听el-table的纵向滚动,当滚动高度达到特定值时进行一些操作。
代码如下:

methods:{throttledHandleScroll() {// 如果已经有定时器存在,则不执行方法,实现节流if (this.throttleTimer || this.paging) return;this.throttleTimer = setTimeout(() => {this.handleScroll(); // 实际执行滚动逻辑的方法this.throttleTimer = null; // 执行完后清空定时器ID,允许下次触发}, 100); // 200毫秒的节流时间间隔},handleScroll() {let dom = this.$refs.multipleTable.$el.getElementsByClassName('is-scrolling-left')[0];if (dom) {// console.log('handleScroll', dom.scrollTop);if (dom.scrollTop >= 80) {this.hiddenFilter = true;}if (dom.scrollTop <= 0) {this.hiddenFilter = false;}}},
},
mounted() {this.$nextTick(() => {this.$refs.multipleTable.$el.getElementsByClassName('is-scrolling-left')[0].addEventListener('scroll', this.throttledHandleScroll);});},
beforeDestroy() {this.$refs.multipleTable.$el.getElementsByClassName('is-scrolling-left')[0].addEventListener('scroll', this.throttledHandleScroll);
},

问题

当el-table横向滚动之后,

let dom = this.$refs.multipleTable.$el.getElementsByClassName('is-scrolling-left')[0];

会取得一个undefind,也就是说没有找到类名为is-scrolling-left的元素。

原因

随着el-table的横向滚动,is-scrolling-left这个类名会依次变化为is-scrolling-middle,is-scrolling-right

解决

使用el-table__body-wrapper替换is-scrolling-left,el-table__body-wrapper这个类名是永远不会变动的
handleScroll方法中获取dom的一行修改为

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

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

相关文章

百万人都在求的网络安全学习路线,渗透漏洞防御总结(附图)

前言 不折腾的网络安全&#xff0c;和咸鱼有什么区别 目录 二、 前言三 、同源策略 3.1 什么是同源策略 3.2 为什么需要同源策略四 、XSS 4.1 概览 4.2 介绍 4.3 防御五 、CSRF 5.1 概览 5.2 介绍 5.3 防御六、 SQL 注入七 、流量劫持 7.1 DNS 劫持 7.2 HTTP 劫持…

【Canvas与艺术】 绘制五星红旗

【注意】 该图中五星定位和大小都是按 https://www.douyin.com/note/7149362345016380710 精确绘制的。 【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8&q…

秋招后端开发面试题 - Java IO

目录 Java IO前言面试题Java IO 流&#xff1f;字节流 vs 字符流区别&#xff1f;字节缓冲流 vs 字符缓冲流&#xff1f;打印流&#xff1f;System.out.println() 是什么&#xff1f;随机访问流&#xff1f;管道流&#xff1f;讲讲 Filter 流&#xff1f;常见的 IO 模型&#x…

【前端】6. JavaScript(WebAPI)

WebAPI 背景知识 什么是 WebAPI 前面学习的 JS 分成三个大的部分 ECMAScript: 基础语法部分DOM API: 操作页面结构BOM API: 操作浏览器 WebAPI 就包含了 DOM BOM. 这个是 W3C 组织规定的. (和制定 ECMAScript 标准的大佬们不是一伙人). 前面学的 JS 基础语法主要学的是 EC…

【多维动态规划】Leetcode 64. 最小路径和【中等】

最小路径和 给定一个包含非负整数的 m x n 网格 grid &#xff0c;请找出一条从左上角到右下角的路径&#xff0c;使得路径上的数字总和为最小。 说明&#xff1a;每次只能向下或者向右移动一步。 示例 1&#xff1a; 输入&#xff1a;grid [[1,3,1],[1,5,1],[4,2,1]] 输出…

手动在Ubuntu22.04上部署LAMP环境

简介 LAMP环境是常用的Web开发环境之一&#xff0c;其中LAMP分别代表Linux、Apache、MySQL和PHP。本文介绍如何在Ubuntu操作系统的ECS实例内部署LAMP环境。 准备工作 该实例必须满足以下条件&#xff1a; 实例已分配公网IP地址或绑定弹性公网IP&#xff08;EIP&#xff09;。…

关于Dockerfile镜像实例

文章目录 Dockerfile镜像实例一、构建SSH镜像1、建立工作目录2、生成镜像3、启动容器并修改root密码 二、构建systemd镜像1、建立工作目录2、生成镜像3、运行镜像容器4、测试容器systemd 三、构建Nginx镜像1、建立工作目录2、编写Dockerfile脚本3、编写run.sh启动脚本4、生成镜…

源代码加密

企业到底该如何正确选择源代码加密产品&#xff1f; 源代码加密的方法和重点到底是怎样的&#xff1f; 源代码开发环境复杂&#xff0c;涉及的开发软件、文件类型庞杂多变&#xff0c;究竟有什么源代码加密软件能够适应众多开发软件而不影响原有的工作效率&#xff1f; 相信…

个人学习总结__打开摄像头、播放网络视频的以及ffmpeg推流

前言 最近入手了一款非常便宜的usb摄像头&#xff08;买回来感觉画质很低&#xff0c;没有描述的4k&#xff0c;不过也够用于学习了&#xff09;,想着利用它来开启流媒体相关技术的学习。第一步便是打开摄像头&#xff0c;从而才能够对它进行一系列后续操作&#xff0c;诸如实…

有趣的 CSS 图标整合技术!sprites精灵图,css贴图定位

你好&#xff0c;我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。 云桃桃-大专生&#xff0c;一枚程序媛&#xff0c;感谢关注。回复 “前端基础题”&#xff0c;可免费获得前端基础 100 题汇总&#xff0c;回复 “前端工具”&#xff0c;可获取 Web 开发工具合…

vue3.0(三) Vite文件目录结构及SFC语法

文章目录 Vite介绍Vite文件目录结构SFC语法SFC 语法定义bug解决 Vite介绍 为什么使用Vite&#xff1f; 表现 与Vite的ESbuild预绑定使其比使用任何其他JS绑定器都快10到100倍。这是因为它有助于提高页面速度并将CommonJS/UMD模块转换为ESM。 基于Vite文件&#xff0c;“预绑定…

npm详解

npm&#xff0c;全称Node Package Manager 是**随Node.js一起安装的包管理器** 1. **包管理**&#xff1a;允许用户通过命令行安装、更新、删除和管理JavaScript包&#xff0c;这些包是Node.js应用程序的构建块。 2. **依赖管理**&#xff1a;自动处理项目所需的所有依赖项&am…

深入理解Linux调试工具eBPF和strace、内存泄漏处理、Kubernetes容器调试以及C++协程的崩溃信息收集

在软件开发领域&#xff0c;无论是初级开发者还是资深工程师&#xff0c;都需要面对复杂的调试工作。本文将介绍几个重要的调试工具和技术&#xff0c;并提供实际调试方法的指导&#xff0c;包括Linux环境下的eBPF和strace&#xff0c;内存泄漏问题的处理&#xff0c;Kubernete…

RocketMq详解:一、RocketMQ 介绍及基本概念

文章目录 前言1.RocketMQ简介2.RocketMQ 特点3.核心特性4.应用场景5.RocketMQ 优势6.RocketMQ 四大核心组件6.1 NameServer1.NameServer作用2.NameServer被设计为无状态的原因3.和NameServer和Zookeeper的区别4.NameServer的高可用保障 6.2 Broker1.Broker部署方式2.高可用与负…

[Algorithm][分治 - 归并排序][排序数组][交易逆序对的总数][计算右侧小于当前元素的个数][翻转对]详细讲解

目录 0.原理讲解1.排序数组1.题目链接2.代码实现 2.交易逆序对的总数1.题目链接2.算法原理详解3.代码实现 3.计算右侧小于当前元素的个数1.题目链接2.算法原理详解3.代码实现 4.翻转对1.题目链接2.算法原理详解3.代码实现 0.原理讲解 归并排序的流程充分的体现了**「分⽽治之」…

监控易:灵活布局与直观展示,重塑网络监控体验

在数字化时代&#xff0c;网络监控的重要性日益凸显。为了更好地满足用户对网络监控的个性化需求&#xff0c;监控易产品不断创新&#xff0c;特别是在布局与展示方面&#xff0c;为用户提供了前所未有的灵活性和直观性。 灵活的布局选择 监控易深知每个用户的管理需求和习惯都…

利用RunnerGo数据大屏强化测试管理与决策

测试平台中的数据大屏在提供实时监控、统计分析、效率提升、制定策略和促进沟通等方面具有重要的意义。它为测试团队提供更全面、更直观的数据支持&#xff0c;有助于提高测试质量和效率&#xff0c;减少风险&#xff0c;并加强团队协作和沟通。 数据大屏也是RunnerGo的核心特…

k8s:精通 Pod 操作的关键命令

在Kubernetes&#xff08;K8s&#xff09;中&#xff0c;Pod是最基本的部署单元&#xff0c;包含了运行应用所需要的容器、存储、网络等资源。精通Pod操作的关键命令对于有效地管理和维护Kubernetes集群至关重要。以下是一些关键的Pod操作命令&#xff1a; 查看Pod列表&#x…

用python写单链表

目录 链表的数据结构单链表操作头插入尾插入中间插入 删除查找 总结 链表的数据结构 链表是什么呢&#xff0c;来看下 链表&#xff0c;是一种数据结构。相对于数组而言&#xff0c;是不连续的一块内存空间。不仅如此&#xff0c;而且链表有多种&#xff0c;包括&#xff1a;…

Spring Security OAuth2 统一登录

介绍 Spring Security OAuth2 是一个在 Spring Security 框架基础上构建的 OAuth2 授权服务器和资源服务器的扩展库。它提供了一套功能强大的工具和组件&#xff0c;用于实现 OAuth2 协议中的授权流程、令牌管理和访问控制。 Git地址&#xff1a;yunfeng-boot3-sercurity: Sp…