基于ElementUI的el-table滚动条处理

日常项目中，我们列表数据过多时，需要table内数据滚动，筛选条件在顶部，分页在窗口底部显示，无论数据怎么滚动，这两部分都在窗口可视区，便于操作。于是，自己封装了一个表单及分页组件

数据滚动同时，表单头部不被遮挡且可随时操作分页，右侧行操作按钮固定于没行的右侧不受影响；窗口大小调整，滚动条变动

参考效果如下：

组件：

计算table高度方法

export const caculateOtherHeight=function(cutClassNames=[]) {
    let total = 0;
    if( cutClassNames&& cutClassNames.length>0){
       cutClassNames.forEach((className) => {
        const h =document.getElementsByClassName(className)[0].offsetHeight || 0;
        total = total + h;
      });
    }
   return total;
  }
  //计算减后的实际高度
  export const calculateHeight=function(cutClassNames=[],cutHeight=0) {
    let otherHeight=caculateOtherHeight(cutClassNames);
    const windowHeight = window.innerHeight; // 窗口高度
    const top = document.getElementById("scrollContent").getBoundingClientRect().top;//滚动区域到顶部距离
    const pageContent = document.getElementById("pageContent");
    let bottomPx = window.getComputedStyle(pageContent).paddingBottom||0;
    let bottomPxM=window.getComputedStyle(pageContent).marginBottom||0;
    const bottom = Number(bottomPx.replace("px", "") || 0);
    const bottomM=Number(bottomPxM.replace("px", "") || 0);
    const total = top + bottom+bottomM + otherHeight;
    const height = windowHeight - total-cutHeight;
   
    return  height;
  }
  export const handleWindowOnresize=function(){
    window.onresize = () => {
        return (() => {
        
          calculateHeight();
        })();
      };
  }

注意，在主内容区加id="pageContent"

 

滚动条样式（全局样式加入）

/ 滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
}
::-webkit-scrollbar-thumb {
  background: #cfcfcf;
  border-radius: 10px;
}

.el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.el-table__body-wrapper, .el-scrollbar__wrap {
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  } 
}
.el-timeline-item__node--normal{
  width: 28px;
  height: 28px;
  left: -9px;
  border:7px solid #fff
}
.tabs.el-tabs--card > .el-tabs__header .el-tabs__nav,
.tabs.el-tabs--card > .el-tabs__header .el-tabs__item,
.tabs.el-tabs--card > .el-tabs__header {
  border: none;
}
.tabs.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-radius: 4px 4px 0 0;
  background: #e8ebf2;
  color: #5f6677;
  margin-right: 3px;
  height: 34px;
  line-height: 36px;
}
.tabs.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  color: #fff;
  border: none;
  background: #2a8dff;
}

页面引入使用：