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>

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

相关推荐
java水泥工5 小时前
旅游管理系统|基于SpringBoot和Vue的旅游管理系统(源码+数据库+文档)
spring boot·vue·计算机毕业设计·java毕业设计·旅游管理系统
duansamve1 天前
Vue3与Vue2中使用对比
vue
Jeffrey__Lin2 天前
解决ElementPlus使用ElMessageBox.confirm,出现层级低于el-table的问题
前端·javascript·elementui·vue·elementplus
麦麦大数据3 天前
F024 RNN+Vue+Flask电影推荐可视化系统 python flask mysql 深度学习 echarts
python·rnn·深度学习·vue·echarts·电影推荐
HECHEN****4 天前
Composition API 与 React Hook 很像,区别是什么?
vue·面试题
知识分享小能手4 天前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
cgsthtm4 天前
RuoYi.Net后端返回雪花ID前端精度丢失问题
oracle·vue·精度丢失·雪花id·ruoyi.net
玩代码4 天前
使用 nvm(Node Version Manager) 高效管理Node.js
node.js·vue·nvm
bdawn5 天前
Vue3 项目首屏加载性能优化全攻略
性能优化·vue·策略·分包
Orange_sparkle5 天前
若依使用基本步骤
java·vue