当前位置: 首页 > 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的一行修改为

http://www.lryc.cn/news/341941.html

相关文章:

  • JAVA中的日期
  • 一起了解开源自定义表单的优势表现
  • 体育老师工资高吗,奖金有吗
  • Linux驱动开发——(十一)INPUT子系统
  • 大数据毕业设计Python+Django旅游景点评论数据采集分析可视化系统 NLP情感分析 LDA主题分析 bayes分类 旅游爬虫 旅游景点评论爬虫 机器学习 深度学习 人工智能 计算机毕业设计
  • FSNotes for Mac v6.7.1中文激活版:强大的笔记管理工具
  • 课程34:Windows Docker部署.Net Core项目
  • 分布式与一致性协议之ZAB协议(四)
  • 在M1芯片安装鸿蒙闪退解决方法
  • Linux基础-socket详解、TCP/UDP
  • 【菜单下拉效果】基于jquery实现二级菜单下拉效果(附完整源码下载)
  • 如何使用resource-counter统计跨Amazon区域的不同类型资源数量
  • nextTick的作用与原理
  • mybatis工程需要的pom.xml,以及@Data 、@BeforeEach、@AfterEach 的使用,简化mybatis
  • 微信小程序demo-----制作文章专栏
  • Linux migrate_type初步探索
  • i.MX 6ULL 裸机 IAR 环境安装
  • cmake进阶:文件操作
  • 在UI界面中播放视频_unity基础开发教程
  • TypeScipt 联合类型 | 号的使用
  • MATLAB 变换
  • 【005_音频开发_基础篇_ALSA_Codec_驱动-MA120x0P功放】
  • 2、​​​​​​​FreeCAD模块与核心架构总结
  • MySQL为什么默认引擎是InnoDB?
  • K8s: Helm搭建mongodb集群(1)
  • 应用分层和企业规范
  • Flutter笔记:Widgets Easier组件库(1)使用各式边框
  • OpenHarmony实战开发-上传文件
  • 外贸企业邮箱是什么?做外贸企业邮箱哪个好?
  • 写一个简单的程序