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高度自適應屏幕大小變化”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。