博客

一、element ui Table 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。此时有一个弊端，如果页面布局内容较多，会出现两个滚动条，一个table的一个页面的，我们的需求是页面高度随着数据数量而自适应撑开，而不是固定table视窗的高度

二、效果图对比如下：

三、实现步骤

1、首先监听页面滚动事件、因为滚动事件触发太过频繁我就带了500毫秒的节流

mounted() {
    window.addEventListener('scroll', this.throttle(this.test), true)
  },

methods: {
	test(e) {
      let head = this.$refs.table.$el
      if(e.target.scrollTop > head.offsetTop) {
        this.fixedHeader = true
      } else {
        this.fixedHeader = false
      }
    },

    throttle(fn, delay = 500) {
      let flag = true
      return (...args) => {
        if (!flag) return
        flag = false
        setTimeout(() => {
          fn.apply(this, args);
          flag = true
        }, delay)
      }
    }
}

	

2、获取table元素的offsetTop 并与e.target.scrollTop对比，当他们相等时表示table滚动到了top：0的位置，此时固定表头及fixedHeader = true

3、通过为table增加class的办法通过css固定表头

:class="fixedHeader ? 'fixedHeader' : '' "

.fixedHeader .el-table__header-wrapper {
  position: fixed;
  top: 76px;
  z-index: 1000;
}

需要注意的是此时style标签中不要加scoped否则不生效。