HTML怎么实现elementui table高度自适应屏幕大小变化

HTML怎么实现elementui table高度自适应屏幕大小变化

这篇文章主要介绍了HTML怎么实现elementui table高度自适应屏幕大小变化的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML怎么实现elementui table高度自适应屏幕大小变化文章都会有所收获，下面我们一起来看看吧。

情景分析：

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: {

       //计算页面高度

        getTableHeight（） {

            this.tableHeight = this.getTableHeight（）;

            this.tableHeight = this.tableHeight – this.freeTableHeight;

        },

        //获取减去除table表单页其余的高度值

        getTableHeight（） {

             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;

        }

    }

关于“HTML怎么实现elementui table高度自适应屏幕大小变化”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“HTML怎么实现elementui table高度自适应屏幕大小变化”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注高防服务器网行业资讯频道。

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[