elementUI vue2 前端表格table数据导出（二）

为啥前端导出不在赘述了，不然读者也难看到这篇文章。

第一步：安装依赖

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' },
]