alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案
一、前言
ElementUI、iView都以相同的方式提供了表格組件表頭固定的方法，即設(shè)置組件的height屬性。表頭固定很重要，就在于當(dāng)表格數(shù)據(jù)項很多時，滾動條出現(xiàn)在表格組件內(nèi)，而不是出現(xiàn)在表格組件外——這樣的優(yōu)點在于，滾動瀏覽數(shù)據(jù)項時，表頭不發(fā)生滾動而永遠在可視區(qū)域，數(shù)據(jù)項的字段名可以一直看到。
el-table的height屬性可以方便地實現(xiàn)表格固定，但是這個值該設(shè)置為多少以適配屏幕大小呢？設(shè)置過小，則可能出現(xiàn)可視區(qū)域內(nèi)有空白位置，但是表格內(nèi)卻出現(xiàn)滾動條；設(shè)置過大，則在一些小屏幕設(shè)備上瀏覽時，頁面本身和表格內(nèi)部都可能會出現(xiàn)滾動條。兩種情況體驗都是極差的，為了解決這個問題，我們需要動態(tài)地計算頁面空白區(qū)域的高度，然后設(shè)置到height屬性，即根據(jù)頁面大小，動態(tài)計算height屬性。
這個問題難以抽象出通用的插件來解決，因為表格適合的高度在不同頁面都不盡相同。本文使用的方案是，使用CSS和JS結(jié)合的方式，首先使用CSS規(guī)劃出一個自適應(yīng)高度的容器container，組件放到container的內(nèi)部使用absolute絕對定位脫離文檔流（如此table的高度不會影響到頁面布局），然后使用JS獲取container的高度tableHeight，將該值設(shè)置為el-table的height屬性，從而實現(xiàn)表格自適應(yīng)高度固定表頭。
二、使用CSS規(guī)劃自適應(yīng)高度的容器container
這里所謂“自適應(yīng)”，是指一個元素（往往是內(nèi)容多少不固定）充分利用頁面剩余空間來展示內(nèi)容。使用CSS來做適應(yīng)性布局，就是要減少在代碼中出現(xiàn)數(shù)值類屬性，充分地利用CSS各屬性的特性讓同一份代碼在不同尺寸的設(shè)備中都能自由兼容呈現(xiàn)。最常用并且也最簡單的一種適應(yīng)性布局技巧是彈性布局，即flex布局。
下面是一個簡單的例子，紅色框是父容器，藍色框是自適應(yīng)高度的內(nèi)容區(qū)域，該元素沒有設(shè)置height屬性，其高度自動適應(yīng)為父元素高度減去“頭部”的高度、padding、頭部和“內(nèi)容”之間的margin等。
<div class="container"><div class="header">不確定高度的頭部</div><div class="content">自適應(yīng)父元素剩余高度的內(nèi)容</div> </div>用flex實現(xiàn)非常簡單：
.container {display: flex; flex-direction: column; } .header { flex-shrink: 0; } .content { flex: auto; }.container {height: 300px;width: 250px;text-align: center;border: 1px solid red;padding: 10px; }.header {padding: 20px;border: 1px solid green;margin-bottom: 10px; }.content {border: 1px solid blue; }前三條規(guī)則就是本例中的核心，對于container，通過display: flex聲明它是一個flex盒子，flex-direction: column則表示flex彈性擴展方向是縱向；對于content，flex: auto表示該元素彈性擴張占滿父元素剩余空間。
在使用表格呈現(xiàn)數(shù)據(jù)時，我們可以使用自適應(yīng)布局的技巧，使得除去頁面中的菜單、導(dǎo)航、各類按鈕等占據(jù)的空間，表格剛好占滿頁面剩余空間，然后固定表頭。以一個常規(guī)管理后臺布局為例：
其中自適應(yīng)區(qū)域我們用來放表格內(nèi)容，其余各個部分都是固定的，在不同尺寸的設(shè)備中，自適應(yīng)區(qū)域?qū)捀咦赃m應(yīng)。只需要在CSS中重復(fù)使用display: flex設(shè)置容器為flex彈性容器、flex:auto使得某一部分占滿父元素剩余空間即可。HTML和核心CSS代碼如下：
1、html代碼
<body><div id="app" class="flex-c"><div class="header flex-s">頭部導(dǎo)航</div><div class="content flex-a flex"><div class="left flex-s">左部菜單</div><div class="right flex-a flex-c"><div class="menu-list flex-s">表格菜單</div><div class="table-container flex-a" ref="container">自適應(yīng)區(qū)域</div><div class="pagination flex-s">表格分頁</div></div></div></div> </body>2、CSS代碼
html {height: 100%; }body {height: 100%;margin: 0; }#app {height: 100%;text-align: center; }.flex, .flex-c { display: flex } .flex-c { flex-direction: column; } .flex-a { flex: auto; } .flex-s { flex-shrink: 0; }二、動態(tài)計算表格高度
我們把表格插入到自適應(yīng)區(qū)域，并將設(shè)置自適應(yīng)區(qū)域為相對定位，表格容器設(shè)置為絕對定位：
html代碼
<div class="table-container flex-a" ref="container"><div class="table-container-inner"><el-table:data="tableData":height="tableHeight"border></el-table></div> </div>css代碼
.table-container {position: relative; }.table-container-inner {position: absolute;left: 0;right: 0;top: 0 }然后我們使用Element.getBoundingClientRect()這個接口來獲取自適應(yīng)區(qū)域的高度，設(shè)置為表格高度，這樣即可達到自適應(yīng)高度固定表頭的效果
export default {data () {return {tableHeight: 0,tableData: [// xxx 表格數(shù)據(jù)]}},mounted () {this.calHeight()},methods: {calHeight () {this.$nextTick(() => {const rect = this.$refs.container.getBoundingClientRect()this.tableHeight = rect.height})}} }當(dāng)然，在用戶操作的過程中，免不了會有一些影響頁面布局的因素，此時我們需要重新計算一次高度。其中最常見的一種操作是改變?yōu)g覽器窗口的大小，我們可以通過監(jiān)聽resize事件來重新計算高度：
data () {return {timer: 0} } mounted () {// ...window.addEventListener('resize', this.onResize) }, beforeDestroy () {this.timer && clearTimeout(this.timer)Z window.removeEventListener('resize', this.onResize) }, methods: {// ...onResize () {this.timer && clearTimeout(this.timer)this.timer = setTimeout(() => {this.calHeight()}, 500)} }為了避免resize高頻觸發(fā)回調(diào)，這里使用定時器進行一個簡單的控制。完整例子可以查看：http://jsrun.net/v56Kp/edit。
三、影響容器高度的其它因素
以上解決方案考慮了窗口resize對表格容器container高度的影響，這是絕大部分需要重新計算表格高度的情況。然而，其它一些情況也可能導(dǎo)致container高度變化，比如DOM增刪或者是樣式修改引發(fā)頁面布局變動。如果想做得更完美，可以在引發(fā)這些操作的地方調(diào)用calHeight方法，或者使用MutationObserver觀察到這些修改。
作者：MuMa
來源：沐碼小站
鏈接：ElementUI表格el-table表頭固定自適應(yīng)高度解決方案 - 沐碼小站
總結(jié)
以上是生活随笔為你收集整理的alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
