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

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

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

参考效果如下：

组件：

<template>
  <div class="">
    <div class="table-wrap">
      <el-table
        :max-height="maxHeight"
        :row-class-name="tableRowClassName"
        ref="table"
        id="scrollContent"
        v-loading="loading"
        :data="listData"
        @selection-change="handleSelectionChange"
        key="001"
        :border="border"
        tooltip-effect="dark"
      >
        <!--  <el-table-column key="c1" type="selection" width="55" align="center" /> -->
        <el-table-column
          key="c1"
          label="序号"
          type="index"
          width="70"
          align="center"
        >
          <template slot-scope="scope">
            <span>{
   
   {
              queryParams.pageSize * (queryParams.pageNum - 1) +
              scope.$index +
              1
            }}</span>
          </template>
        </el-table-column>
        <slot name="col"></slot>
      </el-table>
    </div>
    <div class="page-wrap">
      <pagination
        v-show="queryParams.total > 0"
        :total="queryParams.total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="handlePagination"
      />
    </div>
  </div>
</template>

<script>
import { calculateHeight } from "@/utils/calcHeight";
export default {
  props: {
    //是否显示table边框
    border:{
        type:Boolean,
        default:false
    },
    //是否显示序号
    showIndex: {
      type: Boolean,
      default: true,
    },
    //列表查询参数，包含分页信息
    queryParams: {
      type: Object,
      default: () => ({
        pageNum: 1,
        pageSize: 10,
        total:0,
      }),
    },
    //table数据
    listData: {
      type: Array,
      default: () => [],
    },
    //loading
    loading: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    return {
        maxHeight: 200,
    };
  },
  watch: {
    listData: {
      handler(val) {
        this.handleResize();
      },
    },
  },
  created() {},
  mounted() {
   window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy(){
     window.removeEventListener("resize",this.handleResize);
  },
  methods: {
    handleResize(){
      this.$nextTick(()=>{
        this.maxHeight = calculateHeight([],100);
      })
    },
    tableRowClassName({ row, rowIndex }) {
     if (row.isPoint == 1) {
        return "activebg";
      } else {
        return "";
      }
      this.$emit("tableRowClassNameAction", { row, rowIndex });
    },
    handleSelectionChange(selection) {
      this.$emit("tableRowClassNameAction", selection);
    },
    //分页切换
    handlePagination(){
        this.$emit('getList');
    },
  },
};
</script>
<style lang="scss" scoped>
</style>

计算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;
}

页面引入使用： 

 <bl-table
      :listData="srcaseList"
      :queryParams="queryParams"
      :loading="loading"
      @getList="getList"
    >
      <template slot="col">
        <el-table-column label="节假日名称" align="left" prop="name" />
        <el-table-column label="开始时间" align="left" prop="name" />
        <el-table-column label="结束时间" align="left" prop="name" />
        <el-table-column label="假日类型" align="left" prop="name">
          <template slot-scope="scope"> </template>
        </el-table-column>
        <el-table-column label="备注" align="left" prop="name" />
        <el-table-column label="操作" align="left" prop="name" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" plain size="small" @click="handleEdit(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </template>
    </bl-table>