转载地址:https://www.jianshu.com/p/4d716bec3a26
需求:列表中的每行数据都有一个导出按钮,且点击导出会发起网络请求,获取激活码列表数据。
分析:我使用的vue-json-excel插件,该插件要导出的数据源是放到插件的data属性中,所以我们要先获取到激活码列表数据后,再触发该插件。直接触发的话会导致下载列表中的所有行数据等稀奇古怪的问题。
解决办法:导出按钮和vue-json-excel分离,前者实现发起网络请求,获取激活码列表数据,待获取到激活码列表数据后,再执行后者,实现下载操作。
做法:(核心代码)
html:
<div :key="index" class="export_btn" :style="{ color: exportDisabled == true ? '#f2f2f2' : '#15a0f9' }" @click="exportClick(record.batch)" > 导出 </div> <download-excel style="z-index:-2;position:absolute;" id="download_excel" :data="allList" :fields="allFields" name="激活码列表.xlsx" > <a-button type="primary" class="income_detail"> 导出数据 </a-button> </download-excel>
js:
exportClick(batch) { this.allList = [];// 清空之前的数据 this.request3Func(batch);// 网络请求 }, request3Func(batch) { // 省略部分代码 // 在网络请求的成功回调中写上如下代码(这里一定要等一等再触发点击下载事件,因为VUE的数据模型绑定有时间延迟) setTimeout(function() { document.getElementById("download_excel").click(); }, 100); }
标签:插件,vue,excel,导出,列表,下载 From: https://www.cnblogs.com/lxhbky/p/17133188.html