亚洲av无码乱码国产一区二区,午夜理论片yy44880影院,午夜久久久久久禁播电影,熟睡人妻被讨厌的公侵犯

29
2023/07

Element表格實(shí)現(xiàn)不同分辨率下自適應(yīng)

發(fā)布時(shí)間:2023-07-29 14:43:37
發(fā)布者:吾雖年邁
瀏覽量:
0

  前端做網(wǎng)頁的時(shí)候總會(huì)遇到在不同的分辨率下適配的問題,element可以為表格設(shè)定固定寬度,但是遇到不同分辨率下可能會(huì)讓頁面出現(xiàn)滾動(dòng)條。

  先說一下思路,在頁面不是很復(fù)雜的情況下,就是獲取到窗口的高度,然后減去其他div區(qū)域的高度,剩下的全是表格的。這里有兩種解決思路,css屬性的vhjswindow.innerHeight。

Css方法:

  在css3,vhvw是視口單位,是相對(duì)長度單位。100vh意思是把窗口高度分為100份,我們?cè)谕ㄟ^calc()減去其他的高度計(jì)算出來表格高度。我們直接在這里設(shè)置。

Element表格實(shí)現(xiàn)不同分辨率下自適應(yīng)

Element表格實(shí)現(xiàn)不同分辨率下自適應(yīng)



Js:

      Js的思路是通過window.innerHeight獲取到瀏覽器窗口高度,然后再通過mounted()掛載完成時(shí)控制:height的綁定值,再使用window.onresize監(jiān)聽瀏覽器窗口的變化,當(dāng)窗口變化的時(shí)候重新給:height的綁定值賦值。同時(shí)要注意,要在destroyed中銷毀監(jiān)聽事件,防止內(nèi)存泄漏。還有我們要在created中先賦一次值,element表格沒有讀取到:height的綁定值會(huì)報(bào)錯(cuò)。

 

Element表格實(shí)現(xiàn)不同分辨率下自適應(yīng)

Element表格實(shí)現(xiàn)不同分辨率下自適應(yīng)

Element表格實(shí)現(xiàn)不同分辨率下自適應(yīng)

Element表格實(shí)現(xiàn)不同分辨率下自適應(yīng)


   以上修改分辨率頁面整體內(nèi)邊距并沒有發(fā)生變化,也沒有出現(xiàn)滾動(dòng)條,但是表格顯示的數(shù)據(jù)變少了,說明表格的高度已經(jīng)發(fā)生變化。


關(guān)鍵詞:
返回列表