vxe-table使用隐藏的表格实现导出大数据量时会导致导出的数据不全

323 阅读1分钟

产品使用的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
    }
  }
}