页面滚动固定表头

思路

因为间接去管制antd table的头部置顶会导致头部款式失落，每列去获取宽度设置感觉太麻烦，最初决定应用两个table，一个只做表头固定应用，不赋予数据。
具体做法时，将传入的属于都付给两个table，暗藏表头table的内容局部，当滚动页面超过内容table时，显示表头table。

template

  • :data-source="[]" 表头table的数据为空
  • v-loading="false" 避免出现两个loading
<template>  <div style="overflow: hidden">    <div class="w1-table-fixed">      <a-table        v-show="isShowHead"        v-bind="$attrs"        :data-source="[]"        v-loading="false"      >        <template #[item]="data" v-for="item in Object.keys($slots)">          <slot :name="item" v-bind="data" />        </template>      </a-table>    </div>    <a-table      class="w1-table"      ref="tableRef"      v-bind="$attrs"    >      <template #[item]="data" v-for="item in Object.keys($slots)">        <slot :name="item" v-bind="data" />      </template>    </a-table>  </div></template>

js代码

  import {    defineComponent,    nextTick,    onMounted,    onUnmounted,    PropType,    reactive,    ref,    unref,  } from 'vue';  export default defineComponent({    setup() {      const tableRef = ref();      const isShowHead = ref(false);      function scrollLeft() {        const el = unref(tableRef);        const tableBody = document.getElementsByClassName('ant-table-body')[1];        const fixedTableBody = document.getElementsByClassName('ant-table-body')[0];        // 实现内容table和头部table的滚动联动        tableBody.addEventListener('scroll', () => {          fixedTableBody.scrollLeft = tableBody.scrollLeft;        });        fixedTableBody.addEventListener('scroll', () => {          tableBody.scrollLeft = fixedTableBody.scrollLeft;        });      }      function srollListener() {        const el = unref(tableRef);        const scrollTop =          window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;                  // 滚动大于table到页面顶部高度时，显示固定table头部        if (scrollTop > el.$el.offsetTop) {          isShowHead.value = true;        } else {          isShowHead.value = false;        }      }      onMounted(async () => {        const el = unref(tableRef);        // 确保table曾经创立胜利        if (el) {          await nextTick();          window.addEventListener('scroll', scrollListener, true)          scrollLeft();        }      });      onUnmounted(() => {        window.removeEventListener('scroll', scrollListener, true)      });            return {        tableRef,        isShowHead,      };    },  });

css款式

.w1-table-fixed {    position: fixed;    top: 0;    z-index: 999;    overflow: hidden;    .ant-table-body { // 暗藏滚动条      &::-webkit-scrollbar {        display: none;      }    }    .ant-table-placeholder { // 暗藏头部table的内容      display: none !important;    }  }

问题

不过这个形式就是在显示表头table的时候会有卡顿感，如果有好的优化形式能够评论通知我