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>

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

相关推荐
Yaml44 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
琴~~2 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
程序员徐师兄2 天前
基于 JavaWeb 的宠物商城系统(附源码,文档)
java·vue·springboot·宠物·宠物商城
shareloke2 天前
让Erupt框架支持.vue文件做自定义页面模版
vue
你白勺男孩TT3 天前
Vue项目中点击按钮后浏览器屏幕变黑,再次点击恢复的解决方法
vue.js·vue·springboot
虞泽3 天前
鸢尾博客项目开源
java·spring boot·vue·vue3·博客
川石教育3 天前
Vue前端开发:元素动画效果之过渡动画
前端·vue.js·前端框架·前端开发·vue前端
工业互联网专业3 天前
Python毕业设计选题:基于django+vue的4S店客户管理系统
python·django·vue·毕业设计·源码·课程设计
麦麦大数据3 天前
vue+django+neo4j航班智能问答知识图谱可视化系统
django·vue·echarts·neo4j·智能问答·ltp·航班