关于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 鼠标滚动失灵内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • SpringBoot实现全局和局部跨域的两种方式

    SpringBoot实现全局和局部跨域的两种方式

    本文主要介绍了SpringBoot实现全局和局部跨域的两种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • Vuex3和Vuex4有哪些区别

    Vuex3和Vuex4有哪些区别

    本文主要介绍了Vuex3和Vuex4有哪些区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue中wangEditor的使用及回显数据获取焦点的方法

    vue中wangEditor的使用及回显数据获取焦点的方法

    最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显。接下来通过本文给大家介绍vue中wangEditor的使用及回显数据获取焦点的问题,一起看看吧
    2021-09-09
  • Vue中Vue.use()的原理及基本使用

    Vue中Vue.use()的原理及基本使用

    相信很多人在用Vue使用别人的组件时,会用到 Vue.use() ,例如:Vue.use(VueRouter)、Vue.use(MintUI),这篇文章主要给大家介绍了关于Vue中Vue.use()的原理及基本使用的相关资料,需要的朋友可以参考下
    2021-10-10
  • Vuex(多组件数据共享的Vue插件)搭建与使用

    Vuex(多组件数据共享的Vue插件)搭建与使用

    Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享,数据缓存等等,下面这篇文章主要给大家介绍了关于Vuex(多组件数据共享的Vue插件)搭建与使用的相关资料,需要的朋友可以参考下
    2022-10-10
  • vue结合el-dialog封装自己的confirm二次确认弹窗方式

    vue结合el-dialog封装自己的confirm二次确认弹窗方式

    这篇文章主要介绍了vue结合el-dialog封装自己的confirm二次确认弹窗方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-08-08
  • vue中使用element日历组件的示例代码

    vue中使用element日历组件的示例代码

    这篇文章主要介绍了vue中如何使用element的日历组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-09-09
  • Vue实现具备扫描和查看数据的二维码

    Vue实现具备扫描和查看数据的二维码

    在我们生活中,二维码的应用越来越广泛,特别是在移动互联网的时代,二维码成为了快速传达信息的一种利器,本文我们就来看看如何在Vue框架下,实现一个具备扫描和查看数据的二维码吧
    2023-05-05
  • Vue-路由导航菜单栏的高亮设置方法

    Vue-路由导航菜单栏的高亮设置方法

    下面小编就为大家分享一篇Vue-路由导航菜单栏的高亮设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue cli2.0单页面title修改方法

    vue cli2.0单页面title修改方法

    这篇文章主要介绍了vue cli2.0单页面title修改方法,非常不错,具有一定的参考借鉴,需要的朋友可以参考下
    2018-06-06

最新评论