@yinta/page-table-scroll v1.0.1

指令说明

基于element-ui 的el-table、el-pagination组件，通过监听页面滚动以及页面内容宽高变化，修改el-table、el-pagination样式，实现表格头部的固定在页面顶部以及分页器固定显示在页面底部

使用说明

1. 注册指令

// main.js 引入注册
import pageScroll from '@yinta/page-table-scroll'
Vue.directive('pageScroll', pageScroll)

2. 页面使用

/**
 * @params {Number} isReady 必需 组件生命周期更新状态  0：未更新 1：更新完成  2：销毁或离开
 * @params {String} tag 必需 页面滚动的盒子，即overflow-y:auto || scroll 的元素 class或id，要选择layout组件上router-view的class或id
 * @params {String} tabelTag 非必需，默认.el-table, 如果组件同时显示多个表格时候需要传
 */
// layout组件 appMain.vue  .main-content{ height: 100%; overflow-y:auto}
<template>
  <section>
    <transition name="fade-transform" mode="out-in">
      <keep-alive>
        <router-view :key="key" class="main-content"/>
      </keep-alive>
    </transition>
  </section>
</template>
// 指令使用页面 分页器需要一个div包着，用作表格代理滚动条的容器
<div v-pageScroll:[isReady]="{tag: '.main-content', tabelTag: '.table-affix'}">
  <el-table :data="list" class="table-affix"></el-table>
  <div>
    <el-pagination
      align="right"
      style="margin-top: 15px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formData.current"
      :page-sizes="[10, 20, 30, 40,50,100]"
      :page-size="formData.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</div>
data() {
  return {
    isReady: 0,
    list: []
  }
},
// keep-alive 载入
activated() {
  this.$nextTick(_=> {
    if (list.length) {
      this.isReady = 1
    }
  })
},
// keep-alive 离开
deactivated() {
  this.isReady = 2
}，
methods() {
  // 数据获取 获取数据前 isReady为0 列表渲染完后 isReady为1
  getList() {
    this.isReady = 0
    getList().then(res => {
      this.list = res.data
      this.isReady = 1
    })
  }
}

功能实现逻辑

通过指令绑定，监听页面生命周期，当页面更新，判断isReady状态，改变表头以及分页器的样式 1. 判断是否已经存在处理过的分页器，如果没有则进行处理； 2. 判断内容高度是否超过滚动容器的高度，没超过则不会出现滚动，初始化修改过的样式，超过则出现滚动条，此时需要处理分页器的样式以及表格样式，先将分页器固定在页面底部，然后计算表格需要添加多少的margin-top值才能在滚动条滚动到底部时才能让固定的分页器内容不遮住表格底部的内容，同时能隐藏表格自带的横向滚动条（如果有）； 3. 如果表格存在横向滚动条，由于自带的滚动条无法悬浮，需要使用在处理分页器时生成的滚动条的滚动代理表格的滚动，给表格横向滚动和分页器滚动条添加监听事件，两个滚动实时同步； 4. 给滚动内容添加ResizeObserver事件，监听滚动内容宽高变化，改变表格及分页器样式； 5. 监听滚动内容的滚动事件，当表格滚动到指定位置tabelHeaderFixedPosition，改变表头样式，将表头固定展示在tabelHeaderFixedPosition位置，当表格滚动回来，表头样式还原。如果存在左右固定列，则需要对固定列的表头样式进行处理； 6. 由于页面的update或宽高变化会一次触发次，需要添加防抖；

待完善

1. 表格底部的margin-top值计算可能存在问题，即可能会出现分页器遮挡表格底部部分内容，这块可以结合项目调整。
2. 当前页面update有些场景没考虑到，如果使用中出现问题或者有更好的建议欢迎提出来。