为啥前端导出不在赘述了,不然读者也难看到这篇文章。
第一步:安装依赖
npm install vue-json-excel
第二步:引用依赖配置
// 导出Excel文件组件
import JsonExcel from 'vue-json-excel';
Vue.component('downloadExcel', JsonExcel)
第三步:组件调用
<download-excel :data='tableData' :fields='json_fields' :name='`${tableDataType}.xlsx`'>
<el-button type='primary'>导出</el-button>
</download-excel>
- tableData 是将要导出的表格数据,只要能渲染el-table,就不需要进行二次处理
- tableDataType 是导出的Excel文件的文件名
- json_fields 是将要导出的表格表头
<script>
export default {
data () {
return {
tableData :[], // 存放用于导出excel的数据
json_fields: {
学号: "student_id", //常规字段
姓名: "student_name", //支持嵌套属性
专业班级: "student_majorclass",
成绩: "student_score",
特长: "specialty",
一轮笔试: "firstexam_score",
一轮状态: "first_ispass",
一轮面试:"interview_score",
一面状态:"interview",
二轮面试:"secondinterview_score",
二面状态:"secondinterview"
}
}
},
</script>
json_fields也可以使用动态配置
// 动态配置导出Excel文件的表头
exportExcelHeader() {
this.json_fields = {};
this.tableFilterData.forEach(e => {
this.json_fields[e.label] = e.prop;
});
},
动态配置参考
columnConfigs: {
priceData: [
// 库存数据列配置
{ label: "商品名称", prop: "ItemName" },
{ label: "规格", prop: "ItemGG" },
{ label: "单价", prop: "UnitPrice" },
{ label: "日环比", prop: "HBPrice" },
],
tableFilterData = [
{ label: '字段1', prop: 'rsName' },
{ label: '字段2', prop: 'rsCode' },
]