vue实战(11)——vue+element UI实现表格数据导出Excel功能

一、应用场景

按照需求导出功能分为勾选批量导出及按照查询结果导出，考虑到接口操作导出的复杂性，因此实现了js控制导出的功能

导出功能截图

二、安装相关依赖

cnpm install --save xlsx file-saver

具体插件使用参考https://github.com/SheetJS/js-xlsx，https://github.com/eligrey/FileSaver.js

三、实现代码

考虑到多处使用导出功能，所以封装成公用组件形式
1、列表页

说明：
1、通常情况下列表中的字段不需要formatter，把exportExcelArry 对象中formatterFlag设成false;
2、需要formatter的数据主要有code对应label的转换（type='common-type'），金额的单位转换等，需要根据自己项目的需求封装成通用的组件;
3、针对后端返回的数据data多层的情况，需要对exportExcelArry中的prop字段进行分割来获取row中对应的值，一般情况下两层足够了。