固定列和表头的表格实现

marser 发布于2019-08-23 16:59 / 785人阅读

摘要：前言脱离又借鉴，实现类似的固定列和表头的效果固定，只支持上下滑动，只支持左右滑动，上下左右均可滑动其中下图中和两的滑动事件应用了的效果实现布局项目主要方法的

前言

脱离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 表头固定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103627.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的滑动事...

yzzz 2019-08-29 18:38 评论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