Element-ui table进阶使用

最近项目有多个报表开发的需求，我采用的是凤翎前端组件框架（基于element-ui开发），大伙可以直接参考element-ui组件库文档，把标签中的fks替换为el即可。下面我会按顺序一一展开细说这些需求：

1、有多级表头，合并单元格

如下图所示，降雨量是顶级表头，下面是二三级表头，最后才是表身部分。多级表头很好实现，直接在上一级table-column下创建多个同级table-column就行，一层套一层自由嵌套。

合并单元格就用自带的span-method，比如下图中红框部分单元格，先通过行列index定位，然后return一个数组或者对象，里面前者值为行，后者值为列，比如[1,3]意思就是1行放3列，{rowspan:2,colspan:1}意思就是2行放1列，两种写法都行。

2、能展示数据（非常规行列显示）

通常图表展示数据从上往下是一致的，像下图左右两边数据结构部分一致、部分不同，这就需要专门拼接数据结构。

Table示例中数据格式如下，每个对象对应每一行，对象里的每个参数对应行中每列单元格，所以我们可以先拼接每一行的对象，如下图代码所示，最后进行单元格合并。

3、在table某些区域画框

可以通过给对应单元格设置上下左右边框样式实现，首先用table的cell-class-name属性给单元格设置class名，还是用columnIndex和rowIndex来判断想要设置的单元格，如下图所示。

然后设置对应的css样式即可。

4、特定单元格颜色要能根据不同值显示不同颜色

这个和第3条一样用table的cell-class-name属性给单元格设置class名，只不过要通过传入row的值判断并设置不同class名称。

5、特定单元格可以编辑（鼠标移入或者双击开始编辑，鼠标移出结束编辑，并且编辑后背景色要变成白色），并保留两位小数

编辑可以用cell-click和cell-mouse-leave配合slot-scope实现；替换背景色可以将之前单元格class名称移除后另外添加新class名称实现；编辑时保留几位小数可以直接用这行代码οninput="value=value.replace(/[^\d^\.]+/g,'').replace(/^0+(\d)/,'$1').replace(/^\./,'0.').match(/\d+.?\d{0,1}/)"，最后面的数为几就是保留几位小数。

6、可以前端导出table为excel（还是推荐后端拼接模板并导出）

第一张报表用的是pikaz-excel-js插件，git地址为https://github.com/pikaz-18/pikaz-excel-js，网上文档虽然多，但很多都很基础，官方文档介绍也很简单，没有很详细深入，好在导出的excel看着还原度很高。但用户使用时发现提供的模板和导出的excel文件还是不完全一样，打印时会有其它问题产生，并且前端拼接模板耗时久，所以后面报表还是由后端统一拼接并接口返回文件流供前端导出。个人建议报表导出功能优先后端来写。

7、可以选择日期、时间段

8、如何让table强制刷新

有时候我们希望table数据变化时刷新table，但直接修改绑定的data对象不会生效，这时候可以给table绑定一个key值，想要强制刷新table时修改这个key值就行。