功能实现-表格吸顶

# js中getBoundingClientRect()方法，返回元素的大小及其相对于视口的位置。

1. 表格的表头吸顶效果 html:

<template>
  <div class="content" ref="scrollDiv">
    <div class="tabs_content">
      <el-tabs :value="activeName" @tab-click="changeTab" ref="tabs">
        <el-tab-pane v-for="val in tabsList" :label="val.label" :key="val" :name="val.name"></el-tab-pane>
      </el-tabs>
       <tabulation ref="tabutable" :search="false" :autoRequest="false" tableExpand tableSelection
        :expandLabel="'修改记录'" :expandWidth="100" :tableData="tableData" :tableTotalSize="totalSize"
        :tableCols="tableCols" :defaultSort="{prop: 'id', order: 'descending'}" @expand="expand"
        @selectionChange="handleSelectionChange" @getList="getList" @rowClick="handleRowClick"></tabulation>
    </div>
  </div>
</temple>

mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.defaultHeight = this.$refs.tabutable.$el.querySelector('.el-table__header-wrapper').getBoundingClientRect().top
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    handleScroll() {
      let toTop = this.$refs.scrollDiv.scrollTop
      // tabs btns固定定位
      if (toTop > 225) {
        this.$refs.tabs.$el.classList.add('fixed_tabs')
        document.querySelector('.btn_box')?.classList.add('fixed_btn')
      } else {
        this.$refs.tabs.$el.classList.remove('fixed_tabs')
        document.querySelector('.btn_box')?.classList.remove('fixed_btn')
      }
      // 处理表格首行相对定位
      let offsetTop = this.$refs.tabutable.$el.offsetTop
      if (toTop - offsetTop > 231 && toTop > 225) {
        this.$refs.tabutable.$el.querySelector('.el-table__header-wrapper').style.top = `${toTop - this.defaultHeight + 108 + 60 + 5}px` //tab距离浏览器上面的高度
        this.$refs.tabutable.$el.classList.add('fixed')
      } else {
        this.$refs.tabutable.$el.classList.remove('fixed')
        this.$refs.tabutable.$el.querySelector('.el-table__header-wrapper').style.top
      }
    },
   }