固定列和表格头的表格实现

前言

脱离element-ui又借鉴element-ui，实现类似el-table的固定列和表头的效果

• 1-1固定，1-2只支持上下滑动，2-1只支持左右滑动，2-2上下、左右均可滑动
• 其中下图中1-2和2-1两part的滑动事件应用了el-table的mousewheel

效果

scroll效果

布局分割

实现

布局：

   
    

      
        

            

               

                    {{ date.dateText }}
               
  
            
        
        
        

            

               

                   1
               
            
        
    
    
    

        
        
  
             

                  
项目
             
        
      
        

            

                
{{ item.title }}
            
        
    

主要方法：

// 滚动右侧body区触发
handleBodyScroll(event) {
  this.scrollValue = this.bodyWrapper.scrollLeft
  this.hasLeft = this.scrollValue > 0
  this.$refs.fixedBody.scrollTop = this.bodyWrapper.scrollTop
  this.$refs.scrollHead.scrollLeft = this.scrollValue
},
// 滚动左侧固定列触发
handleFixedMousewheel(event, data) {
  const bodyWrapper = this.bodyWrapper
  if (Math.abs(data.spinY) > 0) {
    const currentScrollTop = this.bodyWrapper.scrollTop
    if (data.pixelY < 0 && currentScrollTop !== 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;
  if (Math.abs(pixelX) >= Math.abs(pixelY)) {
    event.preventDefault();
    this.bodyWrapper.scrollLeft += data.pixelX / 5;
  }
}

element-ui的mousewheel

import normalizeWheel from 'normalize-wheel'

const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

const mousewheel = function(element, callback) {
  if (element && element.addEventListener) {
    element.addEventListener(isFirefox ? 'DOMMouseScroll' : 'mousewheel', function(event) {
      const normalized = normalizeWheel(event);
      callback && callback.apply(this, [event, normalized]);
    });
  }
};

export default {
  bind(el, binding) {
    mousewheel(el, binding.value);
  }
};