固定列和表頭的表格實現(xiàn)

marser 發(fā)布于2019-08-23 16:59 / 790人閱讀

摘要：前言脫離又借鑒，實現(xiàn)類似的固定列和表頭的效果固定，只支持上下滑動，只支持左右滑動，上下左右均可滑動其中下圖中和兩的滑動事件應(yīng)用了的效果實現(xiàn)布局項目主要方法的

前言

脫離element-ui又借鑒element-ui，實現(xiàn)類似el-table的固定列和表頭的效果

1-1固定，1-2只支持上下滑動，2-1只支持左右滑動，2-2上下、左右均可滑動

其中下圖中1-2和2-1兩part的滑動事件應(yīng)用了el-table的mousewheel

效果

實現(xiàn)

布局：


    
      
          
            
                {{ date.dateText }}
              
          
      
      
          
            
               1
            
          
      
    
    
      
          
             項目
          
      
      
          
             {{ item.title }}

主要方法：

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);
  }
};