vxe-table导出xlsx，当前数据，全量数据

最新推荐文章于 2025-03-13 10:18:02 发布

ljjopq123

最新推荐文章于 2025-03-13 10:18:02 发布

阅读量3.6k

点赞数

文章标签：前端 javascript vue

本文链接：https://blog.csdn.net/ljjopq123/article/details/128206311

版权

本文介绍了如何使用vxe-table在Vue项目中导出xlsx文件，特别是如何设置proxyConfig以实现全量数据的导出。关键在于正确配置proxyConfig.props.list属性，以确保queryAll方法能正确返回数据列表，避免导出时出现无反应或只导出表头的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参照官网手册，不想去点开链接去看，可以参考下面代码片段，搬过来了
链接: https://vxetable.cn/v3/#/table/grid/fullQuery

注意：导出xlsx格式需要安装vxe-table-plugin-export-xlsx插件
promise 数据代理，在proxyConfig.ajax下定义好queryAll方法
重点，配置proxyConfig.props下list属性，看js源码分析出，导出全量数据触发queryAll方法，该方法返回数据后js读取list属性获取数据列表，不然无法导出数据，配置不对会出现点击导出全量数据无反应，或者只导出表头

        <vxe-grid ref="xGrid" v-bind="gridOptions">

          <!--将表单放在工具栏中-->
          <template #toolbar_buttons>
            <vxe-form :data="formData" @submit="searchEvent" @reset="resetEvent">
              <vxe-form-item field="name">
                <template>
                  <vxe-input v-model="formData.name" type="text" placeholder="请输入名称"></vxe-input>
                </template>
              </vxe-form-item>
              <vxe-form-item>
                <template>
                  <vxe-button type="submit" status="primary" content="查询"></vxe-button>
                  <vxe-button type="reset" content="重置"></vxe-button>
                </template>
              </vxe-form-item>
            </vxe-form>
          </template>

          <!--自定义空数据模板-->
          <template #empty>
            <span style="color: red;">
              <img src="https://pic2.zhimg.com/50/v2-f7031359103859e1ed38559715ef5f3f_hd.gif">
              <p>没有更多数据了！</p>
            </span>
          </template>
        </vxe-grid>

import {
    mapState } from 'vuex'
        import XEUtils from 'xe-utils'
        
        export default {
   
          data () {
   
            return {
   
              formData: {
   
                name: ''
              },
              gridOptions: {
   
                resizable: true,
                showOverflow: true,
                border: 'inner'

最低0.47元/天解锁文章