关于ElementUI el-table 鼠标滚动失灵的问题及解决办法

 更新时间:2023年08月04日 09:01:49   作者:钱端工程师  
这篇文章主要介绍了关于ElementUI el-table 鼠标滚动失灵的问题及解决办法,本文给大家分享问题所在原因及解决方案,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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

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

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

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

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

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

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

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

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

Vue+Element UI表格数据滚动,鼠标进入停止滚动,鼠标移出停止滚动

<template>
  <el-table ref="tabledata" :data="tabledate" height="400" @cell-mouse-enter="mouseEnter" @cell-mouse-leave="mouseLeave">
    <el-table-column type="selection"></el-table-column>
    <el-table-column label="序号" prop="id"></el-table-column>
    <el-table-column label="英文名" prop="value"></el-table-column>
    <el-table-column label="中文名" prop="label"></el-table-column>
  </el-table>
</template>
<script>
export default({
    name:'tableDemo',
    data() {
        return{
            table_interval:null,
            tabledate:[
                {id:'1',value:'right',label:'正确'},
                {id:'2',value:'wrong',label:'错误'},
                {id:'3',value:'rightorwrong',label:'正确or错误'},
                {id:'4',value:'right',label:'正确'},
                {id:'5',value:'wrong',label:'错误'},
                {id:'6',value:'rightorwrong',label:'正确or错误'},
                {id:'7',value:'right',label:'正确'},
                {id:'8',value:'wrong',label:'错误'},
                {id:'9',value:'rightorwrong',label:'正确or错误'},
                {id:'10',value:'right',label:'正确'},
                {id:'11',value:'wrong',label:'错误'},
                {id:'12',value:'rightorwrong',label:'正确or错误'},
                {id:'13',value:'right',label:'正确'},
                {id:'14',value:'wrong',label:'错误'},
                {id:'15',value:'rightorwrong',label:'正确or错误'}
            ]
        }
    },
    methods: {
        //数据滚动
        dataScrolling:function(){
            var table=this.$refs.tabledata;
            var top=table.bodyWrapper;
            this.table_interval=setInterval(() => {
                top.scrollTop+=1;
                if(top.clientHeight+top.scrollTop==top.scrollHeight){
                    top.scrollTop=0;
                }
            }, 100);
        },
        //鼠标进入,停止滚动
        mouseEnter:function(){
            clearInterval(this.table_interval);
            this.table_interval=null;
        },
        //鼠标离开,开始滚动
        mouseLeave:function(){
            this.dataScrolling();
        }
    },
})
</script>

到此这篇关于ElementUI el-table 鼠标滚动失灵的问题及解决办法的文章就介绍到这了,更多相关ElementUI el-table 鼠标滚动失灵内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 基于Vue3中实现耳机和扬声器切换的完整方案

    基于Vue3中实现耳机和扬声器切换的完整方案

    在 Web 应用中实现音频输出设备的动态切换,允许用户在扬声器、耳机、蓝牙设备等不同音频输出设备之间自由切换,本文给大家介绍了基于Vue3中实现耳机和扬声器切换的完整方案,需要的朋友可以参考下
    2026-02-02
  • vue3 使用socket的完整代码

    vue3 使用socket的完整代码

    这篇文章主要介绍了vue3 使用socket的完整代码,包括vue3客户端和服务端的实例讲解,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • 解析vue路由异步组件和懒加载案例

    解析vue路由异步组件和懒加载案例

    这篇文章主要介绍了解析vue路由异步组件和懒加载案例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue导入.md文件的步骤(markdown转HTML)

    vue导入.md文件的步骤(markdown转HTML)

    这篇文章主要介绍了vue导入.md文件的步骤(markdown转HTML),帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • 基于vue实现页面滚动加载的示例详解

    基于vue实现页面滚动加载的示例详解

    页面内容太多会导致加载速度过慢,这时可考虑使用滚动加载即还没有出现在可视范围内的内容块先不加载,出现后再加载,所以本文给大家介绍了基于vue实现页面滚动加载的示例,需要的朋友可以参考下
    2024-01-01
  • vue打包后dist目录下的index.html网页显示空白的问题(两种方案)

    vue打包后dist目录下的index.html网页显示空白的问题(两种方案)

    本文主要介绍了vue打包后dist目录下的index.html网页显示空白的问题,主要介绍了两种方式,具有一定的参考价值,感兴趣的可以了解一下
    2023-11-11
  • VUE项目中引入JS文件的方法总结

    VUE项目中引入JS文件的方法总结

    在vue中如果把所有的代码都写到一个页面中,有时比较难找,显得比较复杂,下面这篇文章主要给大家介绍了关于VUE项目中引入JS文件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • Vue路由自动添加#的问题及解决

    Vue路由自动添加#的问题及解决

    这篇文章主要介绍了Vue路由自动添加#的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue滚动到指定位置的多种方式示例详解

    Vue滚动到指定位置的多种方式示例详解

    当容器有滚动条时,有时需要将指定的内容自动滚动到可视区域,怎么实现呢,下面小编给大家带来了多种方法实现Vue滚动到指定位置,感兴趣的朋友跟随小编一起看看吧
    2023-08-08
  • vue将单页面改造成多页面应用的方法

    vue将单页面改造成多页面应用的方法

    最近领导交我一个项目是使用 vue-cli 搭建的单页面应用。下面小编通过本文给大家介绍vue将单页面改造成多页面应用的方法 ,感兴趣的朋友一起看看吧
    2018-11-11

最新评论