npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@yinta/page-table-scroll

v1.0.1

Published

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

Downloads

4

Readme

指令说明

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

使用说明

  1. 注册指令

// main.js 引入注册
import pageScroll from '@yinta/page-table-scroll'
Vue.directive('pageScroll', pageScroll)
  1. 页面使用
/**
 * @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有些场景没考虑到,如果使用中出现问题或者有更好的建议欢迎提出来。