addEventListener第三个参数,布尔值或者详细对象,如果布尔值为true,表示在捕获阶段触发事件。
<template>
<Table
ref="table"
id="query-table-fixed"
:reserve-selection="true"
row-key="id"
v-model:page="page"
v-loading="loading"
:showIndex="false"
:data="tableData"
@getTableData="getTableData"
@selection-change="handleSelectionChange"
>
</Table>
</template>
<script>
//设置了滑动监听,不能给组件设置maxHeight,不然有可能因为组件高度不够,不会触发监听
onMounted(() => {
window.addEventListener('scroll', handleScroll, true);
})
const handleScroll = (e: any) => {
// el-main区域才有滚动条
if (e.target.__vnode.props.class !== 'el-main') return;
//获取table距离header的距离
// let tableTop = document.getElementById('query-table-fixed').offsetTop - 33;
let tableTop = document.getElementById('query-table-fixed').offsetTop;
//获取当前滚动条离顶部的高度
let scrollTop = e.target.scrollTop;
// 获取到table-header的dom
let tableWrapper = document.getElementsByClassName('el-table__header-wrapper')[0];
if (scrollTop >= tableTop) {
tableWrapper.classList.add('fixed-table');
} else {
tableWrapper.classList.remove('fixed-table');
}
};
// 组件销毁时要清除。
onBeforeUnmount(() => {
window.removeEventListener('scroll', handleScroll);
});
</script>
<style>
.fixed-table {
position: fixed;
top: 44px;
z-index: 999;
}
</style>