页面滚动固定表头
思路
因为间接去管制 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 的时候会有卡顿感,如果有好的优化形式能够评论通知我