1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > VUE element-ui 之table表格导出Excel(自定义表头+自定义导出字段内容)

VUE element-ui 之table表格导出Excel(自定义表头+自定义导出字段内容)

时间:2020-02-18 00:33:20

相关推荐

VUE element-ui 之table表格导出Excel(自定义表头+自定义导出字段内容)

导出excel自定义表头及自定义字段步骤:

1.安装依赖

npm install --save xlsx file-savernpm install -D script-loader

2.下载Blob.js、export2Excel.js

百度网盘链接:/s/1iC1kWX5jd7U5J9g_L4BQ2Q

提取码: 3kv4

src下创建excel文件夹将Blob.js、export2Excel.js放入

3.添加导出按钮

<el-button round class="exportExcel1" @click="doExport">导出Excel</el-button>

4.js方法

// 导出doExport() {this.excelData = this.tableData this.export2Excel() },// 数据写入excelexport2Excel() {var that = thisrequire.ensure([], () => {const {export_json_to_excel } = require('@/excel/export2Excel') // 这里必须使用绝对路径,使用@/+存放export2Excel的路径const tHeader = ['日期', '交易量区间/吨', '人数/个', '交易量/吨', '区间内交易量/吨', '交易量占比/%'] // 导出的excel的表头字段可自定义const filterVal = ['create_time', 'sale_interval', 'num', 'totalTon', 'totalTonAver', 'totalTonRatio'] // 对象属性,对应于tHeader,即prop的值,可自定义导出字段const list = that.excelData // json数组对象,接口返回的数据const data = that.formatJson(filterVal, list)export_json_to_excel(tHeader, data, 'xxxx')// 导出的表格名称,可自定义})},// 格式转换formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]))}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。