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

【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的一行修改为

相关文章:

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

el-table横向滚动后&#xff0c;通过is-scrolling-left获取滚动高度失效的问题 需求 现在有一个需求&#xff0c;需要监听el-table的纵向滚动&#xff0c;当滚动高度达到特定值时进行一些操作。 代码如下&#xff1a; methods:{throttledHandleScroll() {// 如果已经有定时器…...

JAVA中的日期

获取当前的日期 LocalDate LocalDate today LocalDate.now();System.out.println("今天是:"today);//今天是:2024-05-06String format today.format(DateTimeFormatter.ofPattern("yyyy年MM月dd日"));System.out.println("今天是&#xff1a;"…...

一起了解开源自定义表单的优势表现

随着社会的进步和科技的发展&#xff0c;越来越多的中小企业希望采用更为先进的软件平台&#xff0c;助力企业实现高效率的流程化管理。低代码技术平台、开源自定义表单已经慢慢走入大众视野&#xff0c;成为一款灵活、高效的数字化转型工具。流辰信息专注于低代码技术平台的研…...

体育老师工资高吗,奖金有吗

教师的薪资水平与多种因素相关&#xff0c;包括教育经验、工作地点、学校类型以及个人的教学成果等。在讨论体育教师的工资问题时&#xff0c;不能仅仅关注数字&#xff0c;更应了解教育价值和个人发展。 初中体育教师的工资水平受多种因素影响。根据网络统计的数据&#xff0c…...

Linux驱动开发——(十一)INPUT子系统

目录 一、input子系统简介 二、input驱动API 2.1 input字符设备 2.2 input_dev结构体 2.3 上报输入事件 2.4 input_event结构体 三、代码 3.1 驱动代码 3.2 测试代码 四、平台测试 一、input子系统简介 input子系统是管理输入的子系统&#xff0c;和pinctrl、gpio子…...

大数据毕业设计Python+Django旅游景点评论数据采集分析可视化系统 NLP情感分析 LDA主题分析 bayes分类 旅游爬虫 旅游景点评论爬虫 机器学习 深度学习 人工智能 计算机毕业设计

毕业论文&#xff08;设计&#xff09;开题报告 学生姓名 学 号 所在学院 信息工程学院 专 业 指导教师姓名 指导教师职称 工程师 助教 指导教师单位 论文&#xff08;设计&#xff09;题目 基于朴素贝叶斯算法旅游景点线上评价情感分析 开 题 报 告…...

FSNotes for Mac v6.7.1中文激活版:强大的笔记管理工具

FSNotes for Mac是一款功能强大的文本处理与笔记管理工具&#xff0c;为Mac用户提供了一个直观、高效的笔记记录和整理平台。 FSNotes for Mac v6.7.1中文激活版下载 FSNotes支持Markdown语法&#xff0c;使用户能够轻松设置笔记格式并添加链接、图像等元素&#xff0c;实现笔记…...

课程34:Windows Docker部署.Net Core项目

这里写目录标题 🚀前言一、安装Docker Desktop1.1 官网下载Docker1.2 安装Docker1.2.1 选择配置,默认都勾选1.2.2 安装中1.2.3 安装成功1.2.4 启动1.2.5 启动成功二、.Net Core 项目发布与部署2.1 修改Dockerfile文件2.2 Web项目发布2.3 修改配置2.3.1 修改dockerfile<...

分布式与一致性协议之ZAB协议(四)

ZAB协议 ZooKeeper是如何选举领导者的。 首先我们来看看ZooKeeper是如何实现成员身份的&#xff1f; 在ZooKeeper中&#xff0c;成员状态是在QuorumPeer.java中实现的&#xff0c;为枚举型变量 public enum ServerState { LOOKING, FOLLOWING, LEADING, OBSERVING }其实&…...

在M1芯片安装鸿蒙闪退解决方法

在M1芯片安装鸿蒙闪退解决方法 前言下载鸿蒙系统安装完成后&#xff0c;在M1 Macos14上打开闪退解决办法接下来就是按照提示一步一步安装。 前言 重新安装macos系统后&#xff0c;再次下载鸿蒙开发软件&#xff0c;竟然发现打不开。 下载鸿蒙系统 下载地址&#xff1a;http…...

Linux基础-socket详解、TCP/UDP

文章目录 一、Socket 介绍二、Socket 通信模型三、Socket 常用函数1 创建套接字2 绑定套接字3、监听连接4、接受连接5、接收和发送数据接收数据发送数据 6、关闭套接字 四、Socket编程试验1、源码server.cclient.c 2、编译&#xff1a;3、执行结果 五、补充TCP和UDP协议的Socke…...

【菜单下拉效果】基于jquery实现二级菜单下拉效果(附完整源码下载)

Js菜单下拉特效目录 &#x1f354;涉及知识&#x1f964;写在前面实现效果&#x1f367;一、涉及知识&#x1f333;二、具体实现2.1 搭建一级菜单2.2 搭建二级菜单项2.3 引入js文件2.4 构建CSS文件 &#x1f40b;三、源码获取&#x1f305; 作者寄语 &#x1f354;涉及知识 ht…...

如何使用resource-counter统计跨Amazon区域的不同类型资源数量

关于resource-counter resource-counter是一款功能强大的命令行工具&#xff0c;该工具基于纯Python 3开发&#xff0c;可以帮助广大研究人员跨Amazon区域统计不同类型资源的数量。 该工具在统计完不同区域的各类资源数量后&#xff0c;可以在命令行中输出并显示统计结果。res…...

nextTick的作用与原理

在 Vue 中&#xff0c;nextTick允许我们延迟执行一段代码&#xff0c;直到 Vue完成其当前的 DOM 更新周期。这使得我们可以在 DOM 更新后安全地访问和修改 DOM 元素。 一、Vue 的异步更新策略 Vue 采用了一种称为异步更新策略的机制。这意味着当数据发生变化时&#xff0c;Vue…...

mybatis工程需要的pom.xml,以及@Data 、@BeforeEach、@AfterEach 的使用,简化mybatis

对 “mybatis - XxxMapper.java接口中方法的参数 和 返回值类型&#xff0c;怎样在 XxxMapper.xml 中配置的问题” 这篇文章做一下优化 这个pom.xml文件&#xff0c;就是上面说的这篇文章的父工程的pom.xml&#xff0c;即&#xff1a;下面这个pom.xml 是可以拿来就用的 <?…...

微信小程序demo-----制作文章专栏

前言&#xff1a;不管我们要做什么种类的小程序都涉及到宣传或者扩展其他业务&#xff0c;我们就可以制作一个文章专栏的页面&#xff0c;实现点击一个专栏跳转到相应的页面&#xff0c;页面可以有科普类的知识或者其他&#xff0c;然后页面下方可以自由发挥&#xff0c;添加联…...

Linux migrate_type初步探索

1、基础知识 我们都知道Linux内存组织管理结构架构&#xff0c;顶层是struct pglist_data&#xff0c;然后再到struct zone&#xff0c;最后是struct page。大概的管理结构是这样的&#xff1a; 根据物理内存的地址范围可划分不同的zone&#xff0c;每个zone里的内存由buddy…...

i.MX 6ULL 裸机 IAR 环境安装

一. IAR 的安装请自行搜索 二. 使用最新版本的 IAR&#xff0c;需要修改 SDK 1. 在 SDK 的 core_ca7.h 加上 #include "intrinsics.h" /* IAR Intrinsics */ 2. debug 时需要修改每个工程下的 ddr_init.jlinkscript&#xff0c;参考链接 Solved: How to conn…...

cmake进阶:文件操作

一. 简介 前面几篇文章学习了 cmake的文件操作&#xff0c;写文件&#xff0c;读文件。文章如下&#xff1a; cmake进阶&#xff1a;文件操作之写文件-CSDN博客 cmake进阶&#xff1a;文件操作之读文件-CSDN博客 本文继续学习文件操作。主要学习 文件重命名&#xff0c;删…...

在UI界面中播放视频_unity基础开发教程

在UI界面中播放视频_unity基础开发教程 前言操作步骤结语 前言 之前我写过一篇在场景中播放视频的文章&#xff0c;但是在开发中有时候也会在UI的界面中播放视频&#xff0c;这期我们做一下在UI的界面中播放视频。 操作步骤 首先在场景中创建一个Raw Image&#xff0c;UI->…...

TypeScipt 联合类型 | 号的使用

联合类型有两种使用方法&#xff1a; 一种类型中多个可能的值。具有多种不同的类型中的一种。 一种类型中多个可能的值。 type isAye true | false;const aye:isAye true; const aye1:isAye false; const aye2:isAye 3; // Type number is not assignable to type isAye…...

MATLAB 变换

MATLAB 变换&#xff08;Transforms&#xff09; MATLAB提供了用于处理诸如Laplace和Fourier变换之类的变换的命令。转换在科学和工程中用作简化分析和从另一个角度查看数据的工具。 例如&#xff0c;傅立叶变换允许我们将表示为时间函数的信号转换为频率函数。拉普拉斯变换使…...

【005_音频开发_基础篇_ALSA_Codec_驱动-MA120x0P功放】

005_音频开发_基础篇_ALSA_Codec_驱动-MA120x0P功放 文章目录 005_音频开发_基础篇_ALSA_Codec_驱动-MA120x0P功放创作背景MA120X0P输出模式BTLSEPBTLSEBTL 硬件配置方式/硬件Limiter限幅器限幅器作用过程 主要寄存器操作指令 ma120x0p.cma120x0p.h 创作背景 学历代表过去、能…...

2、​​​​​​​FreeCAD模块与核心架构总结

FreeCAD作为一个开源的3D建模软件&#xff0c;其内部架构由多个模块组成&#xff0c;这些模块共同协作以支持软件的各种功能。本总结将基于提供的参考文档&#xff0c;对FreeCAD的核心模块、架构特性以及启动过程进行翻译和详细阐述。 核心模块概览 FreeCAD的核心模块主要包括…...

MySQL为什么默认引擎是InnoDB?

因为InnoDB特别强大,其支持很多东西 1.支持事务: 意味着对于一个复杂的SQL语句要么全部执行成功,要么全部失败,因为其底层是原子性的 2.支持并发(行级并发) 意味着面对高并发,多个用户可以同时访问一个表的不同行,不同行之间上锁,而不是给一个表上锁,这样就提高了高并发的性能和…...

K8s: Helm搭建mongodb集群(1)

mongodb 集群搭建 mongdb 部署前 需要创建 pvc, pv 和 sc&#xff0c;如果在云上会自动创建helm 应用中心: https://artifacthub.io 1 &#xff09;Helm 安装 mongodb A. 无本地存储配置&#xff0c;重启数据消失 在 https://artifacthub.io/packages/helm/bitnami/mongodb…...

应用分层和企业规范

目录 一、应用分层 1、介绍 &#xff08;1&#xff09;为什么需要应用分层&#xff1f; &#xff08;2&#xff09;如何分层&#xff1f;&#xff08;三层架构&#xff09; MVC 和 三层架构的区别和联系 高内聚&#xff1a; 低耦合&#xff1a; 2、代码重构 controlle…...

Flutter笔记:Widgets Easier组件库(1)使用各式边框

Flutter笔记 Widgets Easier组件库&#xff08;1&#xff09;&#xff1a;使用边框 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress o…...

OpenHarmony实战开发-上传文件

Web组件支持前端页面选择文件上传功能&#xff0c;应用开发者可以使用onShowFileSelector()接口来处理前端页面文件上传的请求。 下面的示例中&#xff0c;当用户在前端页面点击文件上传按钮&#xff0c;应用侧在onShowFileSelector()接口中收到文件上传请求&#xff0c;在此接…...

外贸企业邮箱是什么?做外贸企业邮箱哪个好?

外贸企业邮箱是什么&#xff1f;外贸企业在进行跨国沟通时必不可少的工具就是外贸企业邮箱&#xff0c;外贸企业邮箱需要具备的条件就是海外邮件抵达率高、安全稳定、多语言沟通。而我们又怎么选择一个适合的外贸企业邮箱呢&#xff1f;小编今天带您一起了解。 一、外贸企业邮…...

好的网站建设公司/今日军事新闻头条视频

一、问题描述 设计一个算法判断字符串str中每个字符是否唯一&#xff0c;例如&#xff0c;"abc"的每个字符是唯一的&#xff0c;算法返回true&#xff0c;而"accb"中字符’c’不是唯一的&#xff0c;算法返回false。 二、问题解答 解析&#xff1a;这里…...

传媒网站给行业做宣传/长沙疫情最新消息今天封城了

三角形面积如【图1】所示。图中的所有小方格面积都是1。 那么&#xff0c;图中的三角形面积应该是多少呢&#xff1f;请填写三角形的面积。不要填写任何多余内容或说明性文字。 可以用大的正方形面积减去三个直角三角形的面积。 上面三角形面积&#xff1a;8 左边三角形面积&am…...

长沙岳麓区房价/搜索引擎优化包括哪些内容

拥塞 计算机网络中的带宽、交换结点中的缓存和处理机等&#xff0c;都是网络的资源。在某段时间&#xff0c;若对网络中资源的需求超过了可用的资源&#xff0c;若网络中许多资源同时供应不足&#xff0c;网络的性能就会变坏&#xff0c;整个网络的吞吐量随之负荷的增大而下降。…...

杭州网站排名优化/sem和seo是什么

日语2——在线考试复习资料 一、单选题 1.ここからまっすぐ行く( )、郵便局があります。 A.ば B.も C.たら D.と 2. 渡辺さんは毎朝パンを( )。 A.食べます B.食べです C.食べるます D.食べります 3. 王さんは、英語が( )。 A.話せます B.話します C.話すます D.…...

上海宝山手机网站制作/百度网讯科技有限公司官网

typescript 支持校验 JavaScript 数据类型&#xff0c;比如 number、boolean、string…可以让我们在写程序时清晰地看见各个对象的类型&#xff0c;更规范地编写&#xff0c;更方便地定位错误。 比如这样操作&#xff1a; let bo: boolean false; let num: number 4; let na…...

做 从哪个网站上下载图片/品牌活动策划

我们非常高兴地告诉大家&#xff0c;大服务器实装已正式启动&#xff01;自第一组测试大服务器组(加基森&#xff0b;黑暗虚空)测试配对开始以来&#xff0c;我们对该配对进行了监测&#xff0c;到目前&#xff0c;我们发现服务器状况非常稳定&#xff0c;游戏环境优化明显。测…...