关于element-ui表头吸附问题的解决方案

<template>
  <div
    id="fix-table-header"
    class="table-wrapper"
    :style="{top: `${navHeightV2}px`}"> // 这里的top是因为我们后台顶部会有一些固定提示
    <el-table
      :data="[]"
      style="width: 100%"
      v-bind="{...$tableClass}"
      class="g-table-wrapper table-header">
      <template v-for="(item,index) in columns">
        <el-table-column
          v-if="item.show"
          :key="index"
          v-bind="{...item}">
          <!-- S 自定义表头 -->
          <template v-if="item.type === 'custom'"
                    slot="header">
            {{ item.label }}
          </template>
          <!-- E 自定义表头 -->
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
 
<script>
// vuex
import { mapState } from 'vuex';
export default {
  name: 'pk-table-header',
  props: {
    // 列表
    columns: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    ...mapState({
      navHeightV2: (state) => state.app.navHeightV2 // 导航栏高度V2
    })
  }
};
</script>
 
<style lang="scss" scoped>
.table-wrapper {
  position: sticky;
  left: 0;
  right: 0;
  z-index: 4;
}
.g-table-wrapper {
  position: relative;
  margin-top: -48px;
  border: 1px solid #ebeef5;
  border-bottom: 0;
}
.table-header {
  margin-top: 0;
  height: 48px;
  overflow: hidden;
}

export const hanldeTableScroll = (vue) => {
  vue.$nextTick(() => {
    if (!vue.$refs.table) return;
    // 获取表格实例
    const tableEl = vue.$refs.table.$el;
    const mainTable = tableEl.querySelectorAll('.el-table__body-wrapper')[0];
    // 获取表头组件实例
    const tableHeaderEl = vue.$refs.tableHeader.$el;
    // 处理因为左侧或右侧固定，滑动时，表头组件跟着滑动
    mainTable.onscroll = function() {
      let mainTableLeft = this.scrollLeft;
      let fixTabel = tableHeaderEl.querySelectorAll('.el-table__body-wrapper')[0];
      let mainTableHeadr = tableEl.querySelectorAll('.el-table__header-wrapper')[0];
      fixTabel.scrollLeft = mainTableLeft;
      mainTableHeadr.scrollLeft = mainTableLeft;
    };
    // 判断表头组件什么时候显示
    const rect = tableEl.getBoundingClientRect();
    const top = rect.top || tableEl.offsetTop;
    // 这里是我们公司业务需要兼容顶部通知、到期等显示
    let stickyTop = vue.$store.state.app.navHeightV2;
    let shouldFixHeader = top < stickyTop;

    tableEl.style.zIndex = shouldFixHeader ? 0 : 5;
  });
};