各種UI組件庫都有表格組件，有的叫 table，有的叫 data grid，反正都是為了展示大量數(shù)據(jù)。
像Element的table組件，功能很強大，代碼也很多，我們的目標不是copy一個Element的table，而是要根據(jù)自己的需求，盡量簡化代碼，盡量容易使用。
今天討論的是表格高度自適應這個功能，Element的table是沒有的，但卻是我們項目中常用的，所以一定要加上它！
Element可以通過給table組件加一個height屬性，讓table的高度固定，我們之前在用Element的時候，會根據(jù)情況，動態(tài)設置table的高度，然后我們就可以得到一個高度自適應的表格了，為了避免重復代碼，我們還用了一個mixin來完成具體邏輯，混入到需要的組件內。雖然這樣也能實現(xiàn)我們的需求，但是不如table本身就有一個這樣的能力來的更方便一點，是不是也有興趣了？
一、動態(tài)計算出表格應該有的高度
如上圖，藍色部分就是表格在目前的情況下應該有的高度，怎么算出來，自由選擇，略過
二、給表格增加一個屬性
這個屬性就是我們需要減去的固定值，當然可以計算出來，不過對于這樣布局一旦確定就基本不會變化的管理系統(tǒng)來說，直接量出來就可以了，你懂的。
這個屬性的名字，我覺得用 height 不太合適，height 讓人覺得會是表格的高度，看下面的代碼
<Table :height="179" @selection-change="handleChange" :columns="columns" :data="data"></Table>
后來，經(jīng)過慎重考慮，決定用 othersHeight，言下之意就是“表格其它部分的”高度，大家盡量擔待
<Table :othersHeight="179" @selection-change="handleChange" :columns="columns" :data="data"></Table>
感覺好多了哈
三、動態(tài)計算表格應有高度
其它部分的高度有了，我們先在組件掛載完成后計算一下表格應用的高度；然后還要有監(jiān)聽窗口的resize事件，在窗口發(fā)生變化的時候，動態(tài)得到高度，重新設置表格的高度以適應新的頁面。代碼如下：
還有一點，表格的高度最開始還是要給一個默認值的，我這里是給了300px，你自己定吧
最后
你已經(jīng)可以在不同的組件內引入我們的表格組件，根據(jù)當前組件的實際情況，給表格組件設置上合適的 othersHeight，改變?yōu)g覽器窗口的大小，你發(fā)現(xiàn)你的表格已經(jīng)動起來了，恭喜你！
你看，不同情況下都適應吧，而且都是正好瀏覽器不出現(xiàn)垂直滾動條的情況下
END
