使用iview的表格实现数据导出

需求场景：需要将前端的数据导出为.csv或者excel文件出来

前端导出的弊端：当前端导出数据量较大的数据时,会比较卡顿(建议还是后端用java来做导出比较好)

具体实现：

在Iview里面已经内置了exportCsv()方法

 

我们在使用iview这个框架的时候可以调用这个API来实现数据导出的需求

<i-table :columns="columns8" :data="data7" size="small" v-ref:table></i-table>

1. 首先需要给iview的Table组件增加一个ref属性用于获取到这个DOM元素
2. 通过数据处理和数据筛选来导出我们需要导出的文件

    this.$refs.table.exportCsv({
                        filename: '自定义数据',
                        columns: 表头信息(基本无需改动直接用绑定列表上面的columns就可以),
                        data: 将处理完的数据保存到这里
                    });