安装插件
cnpm / npm install vue-json-excel -S
引用(谁用谁引)
import JsonExcel from 'vue-json-excel';
components: {
JsonExcel
},
也可以全局引用
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
HTML 使用
<JsonExcel class="export-excel-wrapper" :data="tableData" :fields="json_fields" name="告警规则管理.xls" style="float:left;margin-right: 15px;">
//:data="tableData" 导出的表格数据
//:fields="json_fields" 选择要导出的字段,默认导出全部
<!-- 上面可以自定义自己的样式,还可以引用其他组件button -->
<el-button type="primary" size="small" class="buttonCss">导出</el-button>
</JsonExcel>
json_fields: { //常规字段
"监测类型": "equipmentTypeName",
"线路名称": "lineName",
"杆塔名称": "gtName",
"组织机构名称": "orgName",
"告警规则": "rule",
"规则状态": "ruleStatusName",
"电话": {
field: "phone",
//自定义回调函数
callback: value => {
return `Landline Phone - ${value}`;
}
}
},