alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案
一、前言
ElementUI、iView都以相同的方式提供了表格組件表頭固定的方法，即設(shè)置組件的height屬性。表頭固定很重要，就在于當(dāng)表格數(shù)據(jù)項(xiàng)很多時(shí)，滾動(dòng)條出現(xiàn)在表格組件內(nèi)，而不是出現(xiàn)在表格組件外——這樣的優(yōu)點(diǎn)在于，滾動(dòng)瀏覽數(shù)據(jù)項(xiàng)時(shí)，表頭不發(fā)生滾動(dòng)而永遠(yuǎn)在可視區(qū)域，數(shù)據(jù)項(xiàng)的字段名可以一直看到。
el-table的height屬性可以方便地實(shí)現(xiàn)表格固定，但是這個(gè)值該設(shè)置為多少以適配屏幕大小呢？設(shè)置過(guò)小，則可能出現(xiàn)可視區(qū)域內(nèi)有空白位置，但是表格內(nèi)卻出現(xiàn)滾動(dòng)條；設(shè)置過(guò)大，則在一些小屏幕設(shè)備上瀏覽時(shí)，頁(yè)面本身和表格內(nèi)部都可能會(huì)出現(xiàn)滾動(dòng)條。兩種情況體驗(yàn)都是極差的，為了解決這個(gè)問(wèn)題，我們需要?jiǎng)討B(tài)地計(jì)算頁(yè)面空白區(qū)域的高度，然后設(shè)置到height屬性，即根據(jù)頁(yè)面大小，動(dòng)態(tài)計(jì)算height屬性。
這個(gè)問(wèn)題難以抽象出通用的插件來(lái)解決，因?yàn)楸砀襁m合的高度在不同頁(yè)面都不盡相同。本文使用的方案是，使用CSS和JS結(jié)合的方式，首先使用CSS規(guī)劃出一個(gè)自適應(yīng)高度的容器container，組件放到container的內(nèi)部使用absolute絕對(duì)定位脫離文檔流（如此table的高度不會(huì)影響到頁(yè)面布局），然后使用JS獲取container的高度tableHeight，將該值設(shè)置為el-table的height屬性，從而實(shí)現(xiàn)表格自適應(yīng)高度固定表頭。
二、使用CSS規(guī)劃自適應(yīng)高度的容器container
這里所謂“自適應(yīng)”，是指一個(gè)元素（往往是內(nèi)容多少不固定）充分利用頁(yè)面剩余空間來(lái)展示內(nèi)容。使用CSS來(lái)做適應(yīng)性布局，就是要減少在代碼中出現(xiàn)數(shù)值類(lèi)屬性，充分地利用CSS各屬性的特性讓同一份代碼在不同尺寸的設(shè)備中都能自由兼容呈現(xiàn)。最常用并且也最簡(jiǎn)單的一種適應(yīng)性布局技巧是彈性布局，即flex布局。
下面是一個(gè)簡(jiǎn)單的例子，紅色框是父容器，藍(lán)色框是自適應(yīng)高度的內(nèi)容區(qū)域，該元素沒(méi)有設(shè)置height屬性，其高度自動(dòng)適應(yīng)為父元素高度減去“頭部”的高度、padding、頭部和“內(nèi)容”之間的margin等。
<div class="container"><div class="header">不確定高度的頭部</div><div class="content">自適應(yīng)父元素剩余高度的內(nèi)容</div> </div>用flex實(shí)現(xiàn)非常簡(jiǎ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ī)則就是本例中的核心，對(duì)于container，通過(guò)display: flex聲明它是一個(gè)flex盒子，flex-direction: column則表示flex彈性擴(kuò)展方向是縱向；對(duì)于content，flex: auto表示該元素彈性擴(kuò)張占滿(mǎn)父元素剩余空間。
在使用表格呈現(xiàn)數(shù)據(jù)時(shí)，我們可以使用自適應(yīng)布局的技巧，使得除去頁(yè)面中的菜單、導(dǎo)航、各類(lèi)按鈕等占據(jù)的空間，表格剛好占滿(mǎn)頁(yè)面剩余空間，然后固定表頭。以一個(gè)常規(guī)管理后臺(tái)布局為例：
其中自適應(yīng)區(qū)域我們用來(lái)放表格內(nèi)容，其余各個(gè)部分都是固定的，在不同尺寸的設(shè)備中，自適應(yīng)區(qū)域?qū)捀咦赃m應(yīng)。只需要在CSS中重復(fù)使用display: flex設(shè)置容器為flex彈性容器、flex:auto使得某一部分占滿(mǎn)父元素剩余空間即可。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">表格分頁(yè)</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; }二、動(dòng)態(tài)計(jì)算表格高度
我們把表格插入到自適應(yīng)區(qū)域，并將設(shè)置自適應(yīng)區(qū)域?yàn)橄鄬?duì)定位，表格容器設(shè)置為絕對(duì)定位：
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()這個(gè)接口來(lái)獲取自適應(yīng)區(qū)域的高度，設(shè)置為表格高度，這樣即可達(dá)到自適應(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)然，在用戶(hù)操作的過(guò)程中，免不了會(huì)有一些影響頁(yè)面布局的因素，此時(shí)我們需要重新計(jì)算一次高度。其中最常見(jiàn)的一種操作是改變?yōu)g覽器窗口的大小，我們可以通過(guò)監(jiān)聽(tīng)resize事件來(lái)重新計(jì)算高度：
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)，這里使用定時(shí)器進(jìn)行一個(gè)簡(jiǎn)單的控制。完整例子可以查看：http://jsrun.net/v56Kp/edit。
三、影響容器高度的其它因素
以上解決方案考慮了窗口resize對(duì)表格容器container高度的影響，這是絕大部分需要重新計(jì)算表格高度的情況。然而，其它一些情況也可能導(dǎo)致container高度變化，比如DOM增刪或者是樣式修改引發(fā)頁(yè)面布局變動(dòng)。如果想做得更完美，可以在引發(fā)這些操作的地方調(diào)用calHeight方法，或者使用MutationObserver觀察到這些修改。
作者：MuMa
來(lái)源：沐碼小站
鏈接：ElementUI表格el-table表頭固定自適應(yīng)高度解決方案 - 沐碼小站
總結(jié)
以上是生活随笔為你收集整理的alter table add column多个字段_ElementUI表格el-table表头固定自适应高度解决方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 融资和融券的区别
- 下一篇： 雷神开机logo更改_国产外星人雷神再发