vue+element-UI 导出表格遇到的问题
需求: Vue+element UI table下的根据搜索条件导出当前所有数据准备工作: 1、安装依赖:npminstall--savexlsxfile-saver 2、在放置需要导出功能的组件中引入 import FileSaverfrom'file-saver' import XLSXfrom'xlsx' 3、HTML中的设置...
需求:
Vue+element UI table下的根据搜索条件导出当前所有数据
准备工作:
1、安装依赖:npm install --save xlsx file-saver
2、在放置需要导出功能的组件中引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
3、HTML中的设置,简单来说就是给需要导出的table标签el-table上加一个id:如exportTab,对应下面的exportExcel方法中的 document.querySelector('#exportTab')
4、在methods中设置真正实现导出转换excel表格的方法,如下:
methods代码实现:
exportExcel () {
/* generate workbook object from table */
var xlsxParam = { raw: true } // 导出的内容只做解析,不进行格式转换
var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam)
/* get binary string as output */
var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '审核情况表.xlsx')
} catch (e) {
if (typeof console !== 'undefined') {
console.log(e, wbout)
}
}
return wbout
}
容易出现的问题 :
(一)导出的数据出现两份的情况
原因:因为element ui下的el-table被渲染出来后有两个table标签,目的是方便进行数据交互使用,所以如果el-column存在fixed属性时,导出时会出现两份数据的情况
解决方法:我是参照上面大佬的文章,直接将隐藏table中的el-table-column上的fixed属性去掉,毕竟这个table是隐藏起来的,直接去掉el-table-column上的fixed属性最便捷
(二)如果存在分页,导出时却只导出当前table绑定的数据,假如我们设置的table每页只有10条数据,导出时只导出了10条,并非所有符合条件的数据
原因:此插件只导出当前table中所有的数据
解决办法:在HTML代码中再加一个el-table标签,这个table专门用来导出数据,且此table一直隐藏着,当查询条件发生变化时,根据后台返回的所有符合条件的数据总量total值,然后重新设置获取后台数据方法的参数,拉取到所有符合条件的数据绑定进来,这样导出的就是想要的数据了。
更多推荐
所有评论(0)