关于前端:antd-vue-table滚动页面固定表头

页面滚动固定表头

思路

因为间接去管制 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 的时候会有卡顿感，如果有好的优化形式能够评论通知我