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>

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

相关推荐
程序视点7 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
刚刚好ā8 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
ZwaterZ11 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
ZwaterZ14 小时前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
木子七16 小时前
vue2-vuex
前端·vue
小小黑00717 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
Ztiddler20 小时前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue
逆旅行天涯1 天前
【功能实现】bilibili顶部鼠标跟随效果怎么实现?
前端·javascript·vue
DDDHL_2 天前
vitepress博客模板搭建
前端·vue
说书客啊2 天前
计算机毕业设计 | SpringBoot+vue汽车资讯网站 汽车购买咨询管理系统(附源码+论文)
java·spring boot·node.js·vue·汽车·毕业设计·课程设计