HTML怎么實現elementuitable高度自適應屏幕大小變化

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

創新互聯公司，為您提供網站建設公司、成都網站制作、網站營銷推廣、網站開發設計，對服務成都格柵板等多個行業擁有豐富的網站建設及推廣經驗。創新互聯公司網站建設公司成立于2013年,提供專業網站制作報價服務,我們深知市場的競爭激烈，認真對待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發展進步，是我們永遠的責任！

情景分析：

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

文章名稱：HTML怎么實現elementuitable高度自適應屏幕大小變化
當前URL：http://m.kartarina.com/article48/gesdhp.html

成都網站建設公司_創新互聯，為您提供網站建設、自適應網站、電子商務、搜索引擎優化、外貿網站建設、網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯