HTML怎么實(shí)現(xiàn)elementui table高度自適應(yīng)屏幕大小變化

這篇文章主要介紹了HTML怎么實(shí)現(xiàn)elementui table高度自適應(yīng)屏幕大小變化的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇HTML怎么實(shí)現(xiàn)elementui table高度自適應(yīng)屏幕大小變化文章都會有所收獲，下面我們一起來看看吧。

情景分析：

1. 有一個普通列表頁，頁面滾動時表頭不會固定，向上滾動表頭會被遮住，體驗(yàn)極差；

2. 比如有搜索欄，頁面滾動條讓搜索欄也被滾動，滑到頁面后半部分就不能搜索了，要滾到頁面頂部才可以看到搜索框，輸入搜索。

解決方法：

給table設(shè)置屬性   :max-height="tableHeight"

根據(jù)獲取瀏覽器高度 - 頁面固定的部分高度 = tableHight

添加resize事件，監(jiān)聽頁面

具體代碼：

import variables from '@/assets/styles/variables.scss';

//variables 里已經(jīng)定義好了頁面上的nav高度、搜索欄高度、bodypadding、margin變量，直接引入計(jì)算即可

    mounted（） {

        this.$nextTick（（） => {

            this.getTableHeight（）;

        }）;

        window.addEventListener（'resize', this.getTableHeight）;

    },

    beforeDestroy（） {

        window.removeEventListener（'resize', this.getTableHeight）;

        //一定記得在頁面關(guān)閉前銷毀監(jiān)聽的resize事件，不然多次刷新后頁面會因?yàn)閮?nèi)存泄漏崩潰

    },

    methods: {

       //計(jì)算頁面高度

        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

            ];

        //將不是數(shù)值的例如10px 轉(zhuǎn)為 10，相加

        let computedHeight = computedArr.reduce（function（itemA, itemB） {

        return parseInt（itemA） + parseInt（itemB）;

        }, 0）;

        return window.innerHeight - computedHeight;

        }

    }

關(guān)于“HTML怎么實(shí)現(xiàn)elementui table高度自適應(yīng)屏幕大小變化”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“HTML怎么實(shí)現(xiàn)elementui table高度自適應(yīng)屏幕大小變化”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。