产品使用的vxe-table,导出的数据超过3000行时,会导致导出的数据不全,经过排查,发现是因为vxe-table使用的是隐藏模式,不能让用户滚动加载,所以表格的高度就显得格外重要,之前是99999的高度,发现有3044行数据时,只导出了2785行,经过计算,99999/36 约等于2785行.所以问题得以解决,当然这种解决只是暂时的,看以后有机会再做进一步的优化吧。 代码如下:
// xTableExport.vue
<vxe-grid
v-if="openExport"
style="width: 9999px"
height="9999999999"
show-overflow
show-header-overflow
ref="xTableHide"
class="tableHide xTableHide"
id="xTableHide"
:columns="columns"
>
</vxe-grid>
openExport(state) {
if (state) {
this.$showLoading()
this.$nextTick(() => {
this.$refs.xTableHide.reloadData(this.tableData)
setTimeout(() => {
constructTableExport({
title: this.title,
topInfo: this.topInfo,
// exportTable: '#xTableHide' 不知道为什么这个id在dom中没有渲染上,故用下面的class获取table
exportTable: '.xTableHide'
})
.then(res => {
this.openExport = false
this.$hideLoading()
})
.catch(error => {
this.openExport = false
this.$hideLoading()
if (error) this.$message.error(error)
})
}, 500)
})
}
}
// xTableExportConstruct.js
// xTableExport.js
import xTableExport from '../../../../gl/src/components/glRpt/xTableExport'
export default {
install(Vue) {
const ExportConstructor = Vue.extend(xTableExport)
let instance = new ExportConstructor()
instance.$mount(document.createElement('div'))
document.body.appendChild(instance.$el)
Vue.prototype.$xTableExport = opt => {
if (opt.title) instance.title = opt.title
if (opt.data) instance.tableData = opt.data
if (opt.topInfo) instance.topInfo = opt.topInfo
if (opt.columns) instance.columns = opt.columns
instance.openExport = true
}
}
}