一次表格及分页优化完善实践，表头固定及分页固定（模仿禅道）

原创

已于 2022-03-14 11:04:48 修改 · 置顶 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #vue.js

于 2021-11-19 15:40:25 首次发布

本文介绍了一种Vue项目中表格滚动加载与分页组件固定的实现方法，包括通过监听滚动事件调整表格头部及分页组件的位置。

需求：

1、当表格数据未查看到最后一条时，分页固定在页面最下方，直到查看表格最后一行，分页取消固定；
2、当表格滑动到上方，表头固定在系统的上方

思路：

1、当鼠标滑动时判断表格距离浏览器上方的距离，当距离小于系统头部时，表头固定，反之取消固定，可以使用@wheel获取滑轮滚动事件，也可以使用window.addEventListener监听滑动条滑动事件scroll
2、表头固定的方式有三种：

方法一：给el-table的height赋值，获取表格中滚动条滚动到最后一行，始终差着点值，不知道什么原因，考虑不周，想加占位符试试，最初实现了，但是因为高度固定，后面的占位符一直可视，所以冲突了，所以使用了方法二

方法二：使用一模一样的表格，把原表格的表头隐藏，把新表格的内容隐藏

方法三：自己使用div照着表头的样式写一个，个人不太喜欢这种

3、新增一个占位符在表格的下方，当该元素不在可视区域时，分页固定，反之，取消固定

反思：

1、@wheel获取滑轮滚动事件先触发，获取不到滚动条滑动的正确距离，所以有延迟
2、固定表格时，由于考虑不周，忘记了固定了表格高度，元素就一直可见了，想用方法一和方法二结合做
3、改着改着代码手滑把判断表格距离浏览器上方的距离 <= 系统头部，写成了>头部
4、在销毁前移除监听器的时候没有加true参数，导致报错Cannot read property ‘getBoundingClientRect‘ of undefined

自己修改封装的分页组件Pagination.vue

<template>
    <div :class= "{ 'fixed-foot': isFixed, 'pagination': !isFixed }">
      <el-pagination
          v-if="isSmall"
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, prev, pager, next"
          :page-size="page.pageSize"
          :total="page.total">
      </el-pagination>

      <el-pagination
          :page-sizes="[10, 50, 100,500]"
          layout="total,sizes,prev, pager, next,jumper"
          :total="page.total"
          :page-size="page.pageSize"
          :current-page="page.currentPage"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange">
      </el-pagination>

    </div>
</template>
<script>
export default {
    
    
  name: 'pagination', //分页组件
  props: {
    
    
    page: {
    
    
      type: Object,
      default: {
    
    }
    },
    enableSmall: {
    
    
      type: Boolean,
      default: false,
    },
    isFixed: {
    
    
      type: Boolean,
      default: true,
    }
  },
  data() {
    
    
    return {
    
    
      isSmall: this.enableSmall || false, //是否启用small模式
    }
  },
  methods: {
    
    
    handleCurrentChange(val){
    
    
      this.$emit('pageChange', val);
    },
    handleSizeChange(val) {
    
    
      console.log(`每页 ${
      
      val} 条`);
      this.$emit('pageChangeSize', val);
    }
  }
}
</script>
<style lang="less" scoped>
.pagination{
    
    
  position: absolute