工作一年，主要職責是負責公司背景管理平台的開發與維護。此間面對各種業務需求，通過面向谷歌程式設計等常見方式，積累了一些微不足道的經驗。
本篇為總結的第一篇（也許有其他篇）—— table 篇
對于背景管理平台來說，最必不可少的元素就是 table 表格，幾乎每個頁面都涉及到表格的使用，甚至常作為是頁面的主體部分。 是以，如何維護這些 table，并且根據業務需求完善不同解決方案，便是此文所會表達的内容。
主要技術棧如題為 vue 全家桶配合 element-ui（其他技術棧其實思路是類似的），是以主要還是對 el-table 等的再封裝等。element-ui 的文檔已經非常通俗易懂，本文不涉及一些文檔上已有的基本用法。
接下來我會模拟一些簡單的資料來展示一些業務問題的解決方案，其目的在展示思路，代碼以簡易為主。
很多時候我們需要将後端資料作展示優化
本次 table 資料以上面資料模拟後端傳值。我們除了要展示這些字段，還要将後面 5 個 資料作相除或求百分比等，正常寫法如下（不用細看）：
可以看到，僅僅是這十來個字段，就讓頁面顯得非常臃腫，而且很多重複，可想而知如果字段增緻幾十上百，展示方式更加繁瑣，開發維護不易。
表驅動法是《代碼大全》裡面提到程式設計方法，适用于多個 if-else 這樣形式的代碼，這裡自然十分适用。
demo 代碼的目錄結構
将要展示的字段按順序，以一定參數形式的數組結構放在 <code>TABLE_DATA_MAP</code> 對象内，如目前僅有的 tableDemo 即表示為我們上面代碼的表結構數組。
用于對 el-table-colum 的二次封裝，配合上面表結構使用（直接看代碼，其中 toFixedTwo，toPercent 函數在 mixin 混入）
優化後的頁面如下，與之前相比是不是簡潔了不少
除了一些必要參數（如 key label）外，你可以在 tableData.js 中自定義任何參數，配合 tableColumn.vue 使用。與此同時，你可以在 tableColumn.vue 上對一些單獨字段進行特殊處理
此時如果需求要求合計值，也能夠通過 <code>TABLE_DATA_MAP</code> 内資料快速實作（表驅動法經典場景，你可以想象不用現在的方法需要幾個 if-else）
對于一些清單字段較多的 table 頁面，實作清單字段的動态配置的需求就自然而然産生了。 也是得益于我們的表驅動法，我們能夠很簡單得做到這一點。
更新的目錄結構:
這裡使用 vuex 存儲 currentTableData（現在所配置的清單字段），如果是實際工作中，該資料應該存儲于後端資料（後端儲存目前使用者對該頁面的設定，而後在 tableColumn.vue 頁擷取）
思路十分簡單，本質就是在後端儲存一份目前頁面使用者表格的私人定制 <code>TABLE_DATA_MAP</code> 檔案。
導出 table 表格是很常見的需求，基本上一些統計頁面必備。
導出有多種方式：
主要是後端将生成的 table 資料流給到前端，然後前端生成下載下傳連結，模拟點選效果。
此種方法适用于有分頁且分頁量十分大，還有頁面資料的展示和導出與後端傳遞資料（與上面我們需要對資料進行百分比等變化的資料不同）的情況。
需要引入 xlsx 和 file-saver
前端實作導出常見的又有兩種方法：
此種方法适用于無分頁、導出資料即為頁面看到的樣子的情況。
Export2Excel.js 網上有很多版本，大同小異。我對其 <code>export_json_to_excel</code> 函數作了封裝，Export2Excel.js 裡面也有通過 DOM 導出的方法，但使用時會崩潰，是以通過 DOM 導出推薦 2.1 方法
又得益于我們之前的 <code>TABLE_DATA_MAP</code> 檔案，2.2 方法導出基本沒有工作量的問題，節省了很大時間（相信看到這裡，你能夠體會到表驅動法對 table 的意義）
這種方法比 2.1 好在：很多時候導出的 table 列與展示的是不一緻的（如通過清單配置，展示字段少于導出字段情況），我們甚至可以在導出時對某些字段作不同于頁面展示的資料處理。
與此同時其解決了後端導出資料會與展示資料不一緻的問題，在主動性和靈活性上更勝一籌。