工作一年，主要职责是负责公司后台管理平台的开发与维护。此间面对各种业务需求，通过面向谷歌编程等常见方式，积累了一些微不足道的经验。
本篇为总结的第一篇（也许有其他篇）—— 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 列与展示的是不一致的（如通过列表配置，展示字段少于导出字段情况），我们甚至可以在导出时对某些字段作不同于页面展示的数据处理。
与此同时其解决了后端导出数据会与展示数据不一致的问题，在主动性和灵活性上更胜一筹。