具有固定列和标题的表实现

时间：2023-04-02 21:54:37 HTML

前言脱离了element-ui，借鉴了element-ui，实现了类似el-table的固定列和表头的效果。1-1是固定的，1-2只支持上下滑动，2-1只支持左右滑动，2-2上下，可以左右滑动。下图1-2和2-1的滑动事件应用el-table的鼠标滚轮效果实现布局：{{date.dateText}}

项目

{{item.title}}主要方法：handleBodyScroll(event){this.scrollValue=this.bodyWrapper.scrollLeftthis.hasLeft=this.scrollValue>0this.$refs.fixedBody.scrollTop=this.bodyWrapper.scrollTopthis.$refs.scrollHead.scrollLeft=this.scrollValue},handleFixedMousewheel(event,data){constbodyWrapper=this.bodyWrapperif(Math.abs(data.spinY)>0){constcurrentScrollTop=this.bodyWrapper.scrollTopif(data.pixelY<0&¤tScrollTop!==0){event.preventDefault()}if(data.pixelY>0&&bodyWrapper.scrollHeight-bodyWrapper.clientHeight>currentScrollTop){event.preventDefault()}bodyWrapper.scrollTop+=Math.ceil(data.pixelY/5)}else{bodyWrapper.scrollLeft+=Math.ceil(data.pixelX/5)}},handleHeaderMousewheel(event,data){const{pixelX,pixelY}=data;如果(Math.abs(pixelX)>=Math.abs(pixelY)){event.preventDefault();this.bodyWrapper.scrollLeft+=data.pixelX/5;}}element-ui的mousewheelimportnormalizeWheelfrom'normalize-wheel'constisFirefox=typeofnavigator!=='undefined'&&navigator.userAgent.toLowerCase().indexOf('firefox')>-1;constmousewheel=function(element,callback){if(element&&element.addEventListener){element.addEventListener(isFirefox?'DOMMouseScroll':'mousewheel',function(event){constnormalized=normalizeWheel(event);回调&&callback.apply(this,[事件,归一化]);});}};exportdefault{bind(el,binding){mousewheel(el,binding.value);}};

上一篇：async...await的一些用法总结

下一篇：回顾2016年

具有固定列和标题的表实现相关文章