Element 页面滚动表头置顶

在开发后台管理系统时,表格是最常用的一个组件,为了看数据方便,时常需要固定表头。

如果页面基本只有一个表格区域,我们可以根据屏幕的高度动态的计算出一个值,给表格设定一个固定高度,这样表头就可以固定了。

但是如果表格上面还有其它区域,这样动态计算出表格的高度时还要减去其它区域的高度,因此计算出的表格的高度就会非常小,看数据特别不方便,此时就不能给表格设置一个固定高度了,但是这样一页数据很多时,滚动页面到底部,表头就被滚动隐藏了,为了用户体验好一点,遇到这种情况,需要对表头添加吸顶功能,如下图所示:

下面直接上代码:

html 复制代码
<template>
    <div>
        <div class="app-container">
            <!-- 其它区域 -->
            <div class="table-total">
               
            </div>
            <!-- 表格主体 -->
            <div class="table-container">
                <el-table :data="tableData" style="width:100%;">
                    <el-table-column 
                        v-for="item in tableColumn" 
                        :key="item.prop" 
                        :prop="item.prop" 
                        :label="item.label">
                    </el-table-column>
                </el-table>
            </div>

        </div>

    </div>
  
</template>

<script>

export default {
    name: "index",
    data(){
        return{
            // 表格数据列
            tableColumn:[
                {label:"日期",prop:"date"},
                {label:"用户数",prop:"user"},
                {label:"充值金额",prop:"money"},
                {label:"充值人数",prop:"count"},
  
            ],
            // 模拟数据项
            tableData:[]
        }
    },

    created(){

        let result = [];
        for(let i=0;i<100;i++){
            let item = {date:0,user:0,money:0,count:0};
            item.id=i+1;
            result.push(item);
        }
        this.tableData = result;
        
    },


    mounted(){
        window.addEventListener('scroll', this.handleScroll, true)
    },

    beforeDestroy() { 
        window.removeEventListener('scroll', this.handleScroll, true)

    },


    methods: {


        handleScroll(e) {


            let scrollTop = document.getElementsByClassName('app-container')[0].scrollTop;
            let offsetWidth = document.getElementsByClassName('app-container')[0].offsetWidth - 43; // 43=>右侧滚动条加上外边距的宽度
            let headerWrapper = document.getElementsByClassName('el-table__header-wrapper')[0];
            let fixedWrapper = document.getElementsByClassName('el-table__fixed-header-wrapper');

            // 300=>为滚动区域内,除了表格以外,其它的区域高度
            if (scrollTop >= 300) { 
                // 93=>为表头在吸顶时,距离屏幕顶部的位置
                headerWrapper.style.top = '93px';
                headerWrapper.style.zIndex = '2';
                headerWrapper.style.position = 'fixed';
                headerWrapper.style.width = offsetWidth+'px';
                // 表格有固定列时还会多出一个表头
                if(fixedWrapper.length){
                    for (let i=0;i<fixedWrapper.length;i++) {
                        fixedWrapper[i].style.top = '93px';
                        fixedWrapper[i].style.zIndex = '2';
                        fixedWrapper[i].style.position = 'fixed';
                        headerWrapper.style.width = offsetWidth+'px';
                    }
                }
            } else {

                headerWrapper.style.top = '';
                headerWrapper.style.zIndex = '';
                headerWrapper.style.position = 'inherit';
                headerWrapper.style.width = '';

                if(fixedWrapper.length){
                    for (let i=0;i<fixedWrapper.length;i++) {
                        fixedWrapper[i].style.top = '';
                        fixedWrapper[i].style.zIndex = '';
                        fixedWrapper[i].style.width = '';
                    }
                }

            }


        }

    },
};
</script>

<style lang="scss" scoped>

.app-container {
    height: calc(100vh - 108px);
    overflow-y: scroll;

    .table-total{
        height:300px;
        border:1px solid #eaedf1;
    }

    .table-container {
        min-height: calc(100vh - 432px);
        border:1px solid #eaedf1;
    }

}

</style>

以上代码中涉及到的几个数值,请参考注释根据实际情况进行修改。

相关推荐
软件2059 小时前
【vue3主题切换】
vue
结衣结衣.15 小时前
Vue3入门-计算属性+监听器
前端·javascript·vue.js·vue·js
白仑色20 小时前
AJAX 入门到精通
前端·javascript·ajax·okhttp·web开发·前端开发
伍哥的传说1 天前
Webpack5 新特性与详细配置指南
webpack·前端框架·vue·vue3·react·webpack5·前端构建
拾光拾趣录2 天前
Element Plus表格表头动态刷新难题:零闪动更新方案
前端·vue.js·element
页面仔Dony3 天前
UI组件二次封装的正确打开思路
前端·element
xaboy3 天前
Vue 开源项目低代码表单设计器 FcDesigner v3.3 版本发布!兼容Element Plus/Ant Design/Vant,支持PC/移动端
低代码·vue·表单设计器
程序猿小D3 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+vue实现的酒店预订管理系统,推荐!
数据库·mysql·spring·vue·毕业设计·mybatis·酒店预订
马卡龙MK3 天前
vue 不完美的多标签页解决方案
vue
goms3 天前
前端项目集成lint-staged
前端·vue·lint-staged