elementui table高度自适应屏幕大小变化,固定表头,滚动表单body

情景分析:

1. 有一个普通列表页,页面滚动时表头不会固定,向上滚动表头会被遮住,体验极差;

2. 比如有搜索栏,页面滚动条让搜索栏也被滚动,滑到页面后半部分就不能搜索了,要滚到页面顶部才可以看到搜索框,输入搜索。

大致如下图所示:

将页面尺寸变小时:

 将页面尺寸变大时:

 

 解决方法:

  • 给table设置属性   :max-height="tableHeight"
  • 根据获取浏览器高度 - 页面固定的部分高度 = tableHight
  • 添加resize事件,监听页面

具体代码:

import variables from '@/assets/styles/variables.scss';
//variables 里已经定义好了页面上的nav高度、搜索栏高度、bodypadding、margin变量,直接引入计算即可
    mounted() {
        this.$nextTick(() => {
            this.getTableHeight();
        });
        window.addEventListener('resize', this.getTableHeight);
    },

    beforeDestroy() {
        window.removeEventListener('resize', this.getTableHeight);
        //一定记得在页面关闭前销毁监听的resize事件,不然多次刷新后页面会因为内存泄漏崩溃
    },

    methods: {
       //计算页面高度,freeTableHeight是你这个列表页除去导航栏、分页等固定高度外的自由高度。比如你的搜索框,是100px,就 - 100px,如果还有其他的,以此类推
        getTableHeight() {
            this.tableHeight = this.getAnotherElememtHeight();
            this.tableHeight = this.tableHeight - this.freeTableHeight;
        },
        
        //获取减去除table表单页其余的高度值
        getAnotherElememtHeight() {
             let computedArr = [
                variables.appHeaderNavHeight,
                variables.appContentOperatorHeight,
                variables.appContentMargin,
                variables.appContentPadding,
                variables.baseFormSmallHeight,
                variables.appContentListOperatorMarginBottom,
                variables.appPaginationMarginTop,
                variables.baseFormSmallHeight,
                variables.appContentPadding,
                variables.appContentMargin,
            8
            ];
        //将不是数值的例如10px 转为 10,相加
        let computedHeight = computedArr.reduce(function(itemA, itemB) {
        return parseInt(itemA) + parseInt(itemB);
        }, 0);
        return window.innerHeight - computedHeight;
        }
        
    }

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值