导出弹窗的html
<template> <Modal v-model="exportModal" width=400 :closable="false" :mask-closable="false"> <p slot="header" style="color:#000;text-align:left"> <span>数据导出</span> </p> <div style="text-align:center;height:150px;color:#2d8cf0;line-height: 50px;"> <!--<Icon type="load-c" size=28 class="demo-spin-icon-load"></Icon>--> <div style="font-size:18px;margin-top:20px;">数据正在导出,请稍等...</div> <Progress :percent="percent" /> </div> <div slot="footer"> <Button type="primary" size="large" long @click="$emit('cancelExportData')"><Icon type="ios-download-outline" style="margin-right:5px;"></Icon>取消导出</Button> </div> </Modal> </template> <script> export default { name: "my-export", props: ["exportModal", "percent"], } </script> <style scoped> </style>
导出的js公共逻辑
/** * 导出公共方法 以上参数必传 * that 当前页面的this * name table表格声明的表格名称,ref * filename 当前页面的名称 * columns 当前页面表格的title 当没有分页也时,可以不传 * data 当前页面表格的数据 当没有分页也时,可以不传 * * */ export function exportDataTable(that,name,filename,columns,data) { setTimeout(function(){ that.$refs[name].exportCsv({ filename: filename, columns: columns, data: data, }); that.exportModal = false; that.dataTotal = []; that.percent = 0; },1000); } /** * 导出请求的公共方法 以上参数必传 * that 当前页面的this * num table表格数据的页码数 * param 请求的传参 * url 当前请求的变量名 * table name, filename, columns ,formData 组成的对象 * table.name table表格声明的表格名称,ref * table.columns 当前页面表格的title * table.filename 当前页面的名称 * table.formData 特殊处理的文字,需把英文的逗号转换成中文的 * counts 总页码 * * */ export function getDataTotal(that, num, param, url, table, counts) { let params = JSON.parse(JSON.stringify(param)); params.page = num; params.per_page = '1000'; if (that.exportModal && num < global.EXPORT_20_PAGE + 1) { let page = counts > global.EXPORT_20_PAGE * 1000 ? global.EXPORT_20_PAGE * 1000 : counts; url(params) .then(data => { let list = []; if (data.list) { list = data.list; } else { list = data.data; } if (table.formData.length) { table.formData.forEach(ele => { list = transformData(list, ele) }); } that.dataTotal = that.dataTotal.concat(list); that.percent = (that.dataTotal.length / page).toFixed(2) * 100; if (list.length === 1000 && num < global.EXPORT_20_PAGE) { num++; getDataTotal(that, num, param, url, table, counts) } else { exportDataTable(that, table.name, table.filename, table.columns, that.dataTotal); } }) .catch(err => { that.$Message.error(err); }); } else { that.dataTotal = []; that.percent = 0; } } /** * 把表格中英文的逗号转换成中文的逗号 * */ export function transformData(data, title) { data.forEach(ele => { if (title) { if (ele[title]) { ele[title] = ele[title].replace(/,/g, ',').replace(/\s|\xA0/g,"") } } else { for (let key in ele) { if (ele[key]) { ele[key] = ele[key].replace(/,/g, ',').replace(/\s|\xA0/g, "") } } } }) return data }
导出方法的使用
<Button type="primary" class="fr" @click="exportData(1)"> <Icon type="ios-download-outline"></Icon> 导出 </Button> <script> export default { methods: { //导出方法 exportData(num) { this.exportModal = true; let url, columns = [], table = [], param = {}; param = { city: gm.city, campus: gm.campus, min_ymd: this.param.min_ymd, max_ymd: this.param.max_ymd, student_name: this.param.student_name, source_from: this.param.source_from ? this.param.source_from : 0, type: 1, }; columns = [ { title: '校区', key: 'f_campus' }, { title: '收款日期', key: 'f_ymd' }, { title: '学生姓名', key: 'student_name' }, { title: '年级', key: 'f_grade' }, { title: '收款金额', key: 'nbf_prepay_total' }, { title: '收款类型', key: 'f_tuifei_flag' }, { title: '资源来源', key: 'f_source_from' }, { title: '收款人 ', key: 'f_cuid' }, { title: '核录 ', key: 'f_cuid' }, { title: '核录时间 ', key: 'f_ctime', width: 140, }, { title: '是否合单', key: 'f_is_hedan' }, { title: '合单信息 ', key: 'hd' }, ]; table = { name: 'table1',//表格的ref filename: '新签明细',//列表名称 columns: columns,//列表的title formData: ['hd'],//字段中是否有英文逗号 }; url = yejiDetail; this.$getDataTotal(this, num, param, url, table, this.counts); }, //取消导出 cancelExportData() { this.exportModal = false; this.dataTotal = []; this.percent = 0 } } } </script>
这是针对我们公司后台获取数据缓慢,切容易崩掉的处理。