1、首先引入依赖
npm install vue-json-excel
2、在main.js中引用此方法
-
//引入导出excel组件方法
-
import JsonExcel from 'vue-json-excel'
-
Vue.component('downloadExcel', JsonExcel)
3、在需要使用此功能的页面中直接调用
-
//json_data为数据源List,json_fields为表头信息和取值逻辑
-
<download-excel
class = "export-excel-wrapper"
:data = "tableData"
name = "出入库明细.xls">
<!-- 上面可以自定义自己的样式,还可以引用其他组件button -->
<el-button type="primary"><i class="el-icon-upload el-icon--right"></i></el-button>
</download-excel>
-
<button :data="json_data" :fields="json_fields" name="UserInfo">点击导出</button>
-
//表头为User_Name、City、phone、remark
-
//取值逻辑为:User_Name取字段name
-
//City取info中的city
-
//phone取phone中的landline(拼接后)
-
//remark取info中的remark(拼接后)
-
json_fields: {
-
"User_Name": "name", //常规字段
-
"City": "info.city", //支持嵌套属性
-
"phone": {
-
field: "phone.landline",
-
callback: value => {//自定义回调函数
-
return `Landline Phone - ${value}`;//拼接返回值
-
}
-
},
-
"remark": {
-
field: "info.remark",
-
callback: value => {
-
return `Reamrk: ${value}`;
-
}
-
}
-
},
-
//测试数据
-
json_data: [
-
{
-
name: "张三",
-
info:{
-
city: "New York",
-
country: "EN",
-
remark:"测试1"
-
},
-
phone: {
-
mobile: "1",
-
landline: "11"
-
}
-
},
-
{
-
name: "李四",
-
info:{
-
city: "BeiJing",
-
country: "CN",
-
remark:"测试2"
-
},
-
phone: {
-
mobile: "2",
-
landline: "22"
-
}
-
},
-
{
-
name: "王二",
-
info:{
-
city: "Nanjing",
-
country: "CN",
-
remark:"测试3"
-
},
-
phone: {
-
mobile: "3",
-
landline: "33"
-
}
-
}
-
],
-
//数据格式
-
json_meta: [
-
[{
-
" key ": " charset ",
-
" value ": " utf- 8 "
-
}]
-
]