bootstraptable导出excel独立使用_使用 VUE 把你的数据导出成 Excel 表格

引用资料： https:// github.com/jecovier/vue -json-excel

一、安装 vue-json-excel 依赖

npm install vue-json-excel

二、初始化 vue-json-excel

import 

三、准备数据

在这里，我们需要准备两个数据：

• 表头名称：json_fields
• 表格数据：json_data

1、表头数据

json_fields

表头数据由一个 JSON OBJECT 组成，其中：

• key：表头名称
• value：对应数据名称（看不明白？不要急，继续往下看）

2、表格数据

json_fields

表格数据，由一个 JSON ARRAY 组成，其每一个 ITEM 又由一个 JSON OBJECT 组成，其中：

• key：对应数据名称（看明白对应关系了吧）
• value：数据

好了，现在我们可以先去准备下我们的数据，为稍后我们即将要做的导出作准备

四、准备导出

<

运行项目，点击后即可导出一个 .csv 文件

五、项目演示

一、视图层

我用了一个 el-button 【Element 的组件】在里面把整个组件的可点击范围撑大：

<

二、json_data

我的 json_data 是我的后台数据请求过来的，然后我利用 el-table 的多选框进行筛选：

<

JavaScript：

handleSelectionChange

三、json_field

json_fields

四、导出效果