固定列和表頭的表格實現

yzzz 發布于2019-08-29 18:38 / 2510人閱讀

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

前言

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

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

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

效果

實現

布局：


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

GPU云服務器云服務器表格固定表頭固定表頭固定表頭html asp 表頭固定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114465.html

固定列和表頭的表格實現

摘要：前言脫離又借鑒，實現類似的固定列和表頭的效果固定，只支持上下滑動，只支持左右滑動，上下左右均可滑動其中下圖中和兩的滑動事件應用了的效果實現布局項目主要方法的前言脫離element-ui又借鑒element-ui，實現類似el-table的固定列和表頭的效果 1-1固定，1-2只支持上下滑動，2-1只支持左右滑動，2-2上下、左右均可滑動其中下圖中1-2和2-1兩part的滑動事...

littleGrow 2019-08-02 16:13 評論0 收藏0
固定列和表頭的表格實現

摘要：前言脫離又借鑒，實現類似的固定列和表頭的效果固定，只支持上下滑動，只支持左右滑動，上下左右均可滑動其中下圖中和兩的滑動事件應用了的效果實現布局項目主要方法的前言脫離element-ui又借鑒element-ui，實現類似el-table的固定列和表頭的效果 1-1固定，1-2只支持上下滑動，2-1只支持左右滑動，2-2上下、左右均可滑動其中下圖中1-2和2-1兩part的滑動事...

marser 2019-08-23 16:59 評論0 收藏0
bootstrap-table實現表頭固定以及列固定

摘要：之前使用寫了一個報表表格，最近突然找到我，說讓我看看能不能將表格的表頭和第一列進行固定，這樣的話方便查看數據，于是，我開始了苦逼的研究起來，畢竟我是個后端啊，對于前端的樣式問題，特別是小功能，煩的一批這里就記錄下我的研究成果一引入和引入之前使用bootstrap寫了一個報表表格，最近突然找到我，說讓我看看能不能將表格的表頭和第一列進行固定，這樣的話方便查看數據，于是，我開始了苦逼的研...

B0B0 2019-08-23 15:42 評論0 收藏0
移動端實現表頭固定，tbody滾動，三種方法

摘要：實現表頭固定，垂直滾動準備工作獲取頁面可是區域高度屏幕旋轉觸發事件正常方向或者屏幕旋轉豎屏屏幕順時針旋轉或者逆時針旋轉橫屏方法一兩個思路第一個放表頭，第二個方內容。實現表頭固定，tbody垂直滾動準備工作：獲取頁面可是區域高度 function setIframeHeight() { var screenHeight = document.documentElement.c...

AlphaWallet 2019-08-30 11:00 評論0 收藏0
移動端實現表頭固定，tbody滾動，三種方法

摘要：實現表頭固定，垂直滾動準備工作獲取頁面可是區域高度屏幕旋轉觸發事件正常方向或者屏幕旋轉豎屏屏幕順時針旋轉或者逆時針旋轉橫屏方法一兩個思路第一個放表頭，第二個方內容。實現表頭固定，tbody垂直滾動準備工作：獲取頁面可是區域高度 function setIframeHeight() { var screenHeight = document.documentElement.c...

bluesky 2019-08-02 15:10 評論0 收藏0