关于ElementUI el-table 鼠标滚动失灵的问题及解决办法
作者：钱端工程师
这篇文章主要介绍了关于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 鼠标滚动失灵内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！