首页 网络技术
  1. 正文

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高度自适应屏幕大小变化
本文链接:https://www.qqooo.cn/post/6486.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!