Element plus el-table 鼠标滚动失灵的问题及解决办法

news2024/11/24 2:35:59

Bug:ElementUI el-table 鼠标滚轮下滑动失灵的情况

我测出来的这个问题条件很苛刻,需要达到以下几个条件才会触发:

1.element plus(其他版本没试)

2.el-table-column组件有fixed属性时

3.template标签中有el-button,并且el-button有size=“small”时

4.我的浏览器缩放(Ctrl+滚轮)达到110%时

dfe45ef4abeb4929bd85c2725a8bf199.png

会出现向鼠标滚轮下滑动失灵的情况,经过排查是el-button的size的问题,size为small值时,按钮高度是24,我的做法是给按钮加一个类,改变按钮的默认高度为22px,滚动失效问题完全解决

c3c75d6f65c34e09ac25e4e7d3426ebf.png

 

 50076dde624c46bc8d2e3c992d8e0c1a.png

 

但是并不能完全解决问题,因为是改变了组件的按钮高度,并不是真正解决问题,此问题我已经提交给了element plus官网

 

 

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

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

相关文章

【EI/SCOPUS会议征稿】第三届数字经济与计算机应用国际学术会议(DECA2023)

第三届数字经济与计算机应用国际学术会议(DECA2023) The 3rd International Conference on Digital Economy and Computer Application 第三届数字经济与计算机应用国际学术会议 (DECA 2023) 将于2023年9月22-24日在中国上海召开。会议主题主要围绕数…

【2.1】Java微服务:详解Hystrix

✅作者简介:大家好,我是 Meteors., 向往着更加简洁高效的代码写法与编程方式,持续分享Java技术内容。 🍎个人主页:Meteors.的博客 💞当前专栏: 深度学习 ✨特色专栏: 知识分享 &…

每天五分钟机器学习:梯度下降算法和正规方程的比较

本文重点 梯度下降算法和正规方程是两种常用的机器学习算法,用于求解线性回归问题。它们各自有一些优点和缺点,下面将分别对它们进行详细的讨论。 区别 1. 梯度下降算法是一种迭代的优化算法,通过不断迭代调整参数来逼近最优解。它的基本思想是根据目标函数的梯度方向,沿…

Vue-组件二次封装

本次对el-input进行简单封装进行演示 封装很简单,就给激活样式的边框(主要是功能) 本次封装主要使用到vue自带的几个对象 $attrs:获取绑定在组件上的所有属性$listeners: 获取绑定在组件上的所有函数方法$slots: 获取应用在组件内的所有插槽 …

MATLAB的设置路径

在主页下的 或者在命令行输入path,命令行会出现所有路径 必须要将某些函数.m文件以及一些类文件包含在路径当中,否则在脚本代码中输入代码时,不会有代码提示

【Azure】office365邮箱测试的邮箱账号因频繁连接邮箱服务器而被限制连接 引起邮箱显示异常

azure微软office365邮箱会对频繁连接自身邮箱服务器的IP地址进行,连接邮箱服务器IP限制,也就是黑名单,释放时间不确定,但至少一天及以上。 解决办法,换一个IP,或者新注册一个office365邮箱再重试。 以下是…

Mysql5.7 、MySQL 8.0 加密、解密函数

PASSWORD 8.0版本取消了,只能在5.7中使用 返回字符串str的加密版本,41位长的字符串,加密结果不可逆 格式 select PASSWORD(xxx) from DUAL;MD5 5.7和8.0 都支持 返回字符串str的MD5加密后的值,若参数为null,则…

不同风格Tabs

风格 通过type设置风格&#xff0c;支持三种风格card、borderCard、line 核心代码 组件双向绑定 modelVal: {type: Number | String,required: true}, model: {prop: modelVal,event: change} this.$emit(change, this.active) 代码 <template><div:class"[…

【链表OJ 1】移除链表元素val

大家好&#xff0c;欢迎来到我的博客&#xff0c;此题是关于链表oj的第一题&#xff0c;此后还会陆续更新博客&#xff0c;如有错误&#xff0c;欢迎大家指正。 来源:https://leetcode.cn/problems/remove-linked-list-elements/description/ 题目: 方法一:定义prev和cur指针…

基于STM32微控制器的物联网(IoT)节点设计与实现

基于STM32微控制器的物联网(IoT)节点的设计和实现。我们讨论物联网节点的基本概念和功能,并详细介绍了STM32微控制器的特点和优势。然后,我们将探讨如何使用STM32开发环境和相关的硬件模块来设计和实现一个完整的物联网节点。最后,我们将提供一个示例代码,展示如何在STM3…

侯捷 C++面向对象编程笔记——9 复合 委托

9 复合 委托 9.1 Composition 复合 类似于c中结构里有结构——class里有class deque 是一个已经存在的功能很多的类&#xff08;两头进出的队列&#xff09;&#xff1b;利用deque的功能来实现queue的多种操作 该例只是复合的一种情况——设计模式 Adapter 9.1.1 复合下的构造…

【JavaEE进阶】Spring创建与使用

文章目录 一. 创建 Spring 项目1.1 创建一个Maven项目1.2 添加Spring依赖1.4. 创建一个启动类 二. 将 Bean 对象存放至 Spring 容器中三. 从 Spring 容器中读取到 Bean1. 得到Spring对象2. 通过Spring 对象getBean方法获取到 Bean对象【DI操作】 一. 创建 Spring 项目 接下来使…

实时服务器监控

为 IT 基础架构建立适当的监控系统的重要性不容低估&#xff0c;管理员使用的监控解决方案可确保通过消除瓶颈和优化资源使用以获得最佳性能来充分发挥基础架构的潜力。 多年来&#xff0c;IT 基础架构变得越来越复杂&#xff0c;对网络监控的需求也随之增加&#xff0c;虽然网…

R语言3_安装SeurateData

环境Ubuntu22/20, R4.1 在命令行中键入&#xff0c; apt-get update apt install libcurl4-openssl-dev libssl-dev libxml2-dev libcairo2-dev libgtk-3-dev # libcairo2-dev :: systemfonts # libgtk :: textshaping进入r语言交互环境&#xff0c;键入&#xff0c; instal…

运动蓝牙耳机哪个最好、最好用的运动蓝牙耳机推荐

在奔跑的律动中&#xff0c;一款优秀的运动耳机能为我们带来动力。今天&#xff0c;我为大家推荐五款经过精心挑选的运动耳机&#xff0c;它们不仅具备卓越的音质和稳定的连接性&#xff0c;还采用舒适的佩戴设计和耐用的防水功能&#xff0c;可以让我们在运动中畅享音乐的同时…

数据结构之栈和队列---c++

栈和队列的简单介绍 栈 栈是一个“先进后出”结构 队列 入队演示 队列是一种“先进先出”的结构 出队演示 接下来我们开始本次的内容 栈实现队列 分析 1.我们可以老老实实的写一个栈然后将所有的接口函数实现出来&#xff0c;最后再进行实现队列&#xff0c;但是显然…

git开发过程中的使用

1、先创建本地分支&#xff0c;然后修改代码 2、本地提交 push 3、合并为主分支 回到master分支

【【萌新的STM32 学习-6】】

萌新的STM32 学习-6 BSP 文件夹&#xff0c;用于存放正点原子提供的板级支持包驱动代码&#xff0c;如&#xff1a;LED、蜂鸣器、按键等。 本章我们暂时用不到该文件夹&#xff0c;不过可以先建好备用。 CMSIS 文件夹&#xff0c;用于存放 CMSIS 底层代码&#xff08;ARM 和 ST…

Linux——设备树

目录 一、Linux 设备树的由来 二、Linux设备树的目的 1.平台识别 2.实时配置 3.设备植入 三、Linux 设备树的使用 1.基本数据格式 2.设备树实例解析 四、使用设备树的LED 驱动 五、习题 一、Linux 设备树的由来 在 Linux 内核源码的ARM 体系结构引入设备树之前&#x…

Vue——webpack

webpack 一、Install1.全局安装2.局部安装 二、总结1.打包2.定义脚本3.配置文件定义&#xff08;webpack.config.js)4.项目重新加载依赖5.webpack打包Css6.style-loader 一、Install 1.全局安装 npm install webpack webpack-cli -g2.局部安装 以项目为单位&#xff0c;一个项…