标签：states target exp let call 类型 function font filename
本周项目需要实现导出列表数据的功能，在githup上找到了一个比较好用的插件~
简单的整理一下，希望对各位有所帮助。
使用方法：
1.npm安装依赖
npm install vue-json-excel
2.项目主文件入口main.js全局引入
import JsonExcel from ‘vue-json-excel‘ Vue.component(‘downloadExcel‘, JsonExcel)
3.直接在项目中使用
<download-excel :data="exportData" :fields="json_fields" name="filename.xls" > <span>导出数据</span> </download-excel>
4.组件属性说明
| 属性名 | 类型 | 描述 |
|---|---|---|
| data | Array | 需要导出的数据，支持中文 |
| fields | Object | 定义需要导出的数据字段 |
| name | string | 导出EXCEL的文件名 |
| type | string | 导出EXCLE的文件类型，两种格式xls,csv,默认是xls |
| fetch | function | 回调函数。在下载前通过接口获取数据。只有在没有data属性的情况下该属性才会生效 |
下面来举几个栗子
<download-excel class = "btn btn-default" :data = "json_data" :fields = "json_fields" name = "filename.xls"> Download Excel (可以自定义自己想要的html) </download-excel>
const app = new Vue({ el: ‘#app‘, data: { //列出自己需要导出的字段 json_fields: { //生成excel的字段：导出数据的字段 ‘Complete name‘: ‘name‘, ‘City‘: ‘city‘, ‘Telephone‘: ‘phone.mobile‘, ‘Telephone 2‘ : { field: ‘phone.landline‘, callback: (value) => { return `Landline Phone - ${value}`; } }, }, //导出的数据 json_data: [ { ‘name‘: ‘Tony Pe?a‘, ‘city‘: ‘New York‘, ‘country‘: ‘United States‘, ‘birthdate‘: ‘1978-03-15‘, ‘phone‘: { ‘mobile‘: ‘1-541-754-3010‘, ‘landline‘: ‘(541) 754-3010‘ } }, { ‘name‘: ‘Thessaloniki‘, ‘city‘: ‘Athens‘, ‘country‘: ‘Greece‘, ‘birthdate‘: ‘1987-11-23‘, ‘phone‘: { ‘mobile‘: ‘+1 855 275 5071‘, ‘landline‘: ‘(2741) 2621-244‘ } } ] } })
json_fields的回调函数有3种写法
写法一：
json_fields: { ‘Complete name‘: ‘name‘, ‘City‘: ‘city‘, ‘Telephone‘: ‘phone.mobile‘, ‘Telephone 2‘ : { //带field：从该条数据中选择一个字段最深处的数据 field: ‘phone.landline‘, //value就是这个字段值代表最深处的数据 callback: (value) => { return `Landline Phone - ${value}`; } }, },
写法二：
json_fields: { ‘Complete name‘: ‘name‘, ‘City‘: ‘city‘, ‘Telephone‘: ‘phone.mobile‘, ‘Telephone 2‘ : { //带field：从该条数据中选择一个字段 field: ‘phone‘, //value就是这个字段值 callback: (value) => { return `Landline Phone - ${value.landline}`; } }, },
写法三：
json_fields: { ‘Complete name‘: ‘name‘, ‘City‘: ‘city‘, ‘Telephone‘: ‘phone.mobile‘, ‘Telephone 2‘ : { //没有field:value代表整条数据 callback: (value) => { return `Landline Phone - ${value.phone.landline}`; } }, },
标签：states target exp let call 类型 function font filename
原文地址：https://www.cnblogs.com/yy136/p/10015561.html
