Shulou(Shulou.com)06/01 Report--

This article mainly introduces HTML how to achieve elementui table highly adaptive screen size changes related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that after reading this HTML how to achieve elementui table highly adaptive screen size change article will have a harvest, let's take a look at it.

Scenario Analysis:

1. There is a normal list page, when the page scrolls the header will not be fixed, scrolling up the header will be covered, the experience is very bad

two。 For example, there is a search bar, the page scroll bar so that the search bar is also scrolled, slide to the second half of the page can not search, you have to scroll to the top of the page to see the search box, enter the search.

Solution:

Set the property to table: max-height= "tableHeight"

Based on the obtained browser height-the fixed part of the page height = tableHight

Add a resize event to listen to the page

Specific code:

Import variables from'@ / assets/styles/variables.scss'

/ / nav height, search bar height, bodypadding and margin variables on the page have been defined in variables, which can be directly introduced into the calculation.

Mounted () {

This.$nextTick () = > {

This.getTableHeight ()

})

Window.addEventListener ('resize', this.getTableHeight)

}

BeforeDestroy () {

Window.removeEventListener ('resize', this.getTableHeight)

/ / be sure to destroy the listening resize event before the page is closed, otherwise the page will crash due to memory leaks after multiple refreshes

}

Methods: {

/ / calculate the page height

GetTableHeight () {

This.tableHeight = this.getTableHeight ()

This.tableHeight = this.tableHeight-this.freeTableHeight

}

/ / get the height value minus the rest of the table form page

GetTableHeight () {

Let computedArr = [

Variables.appHeaderNavHeight

Variables.appContentOperatorHeight

Variables.appContentMargin

Variables.appContentPadding

Variables.baseFormSmallHeight

Variables.appContentListOperatorMarginBottom

Variables.appPaginationMarginTop

Variables.baseFormSmallHeight

Variables.appContentPadding

Variables.appContentMargin

eight

]

/ / convert non-numeric values such as 10px to 10 and add them up.

Let computedHeight = computedArr.reduce (function (itemA, itemB) {

Return parseInt (itemA) + parseInt (itemB)

}, 0)

Return window.innerHeight-computedHeight

}

}

This is the end of the article on "how HTML implements elementui table highly adaptive screen size changes". Thank you for reading! I believe you all have a certain understanding of "how to achieve elementui table highly adaptive screen size changes in HTML". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.