若依前后端分离版导出功能

最新推荐文章于 2024-05-11 17:17:15 发布

.oop

最新推荐文章于 2024-05-11 17:17:15 发布

阅读量5.1k

点赞数 1

文章标签：前端 vue.js java-ee spring jquery

本文链接：https://blog.csdn.net/qq_56870348/article/details/121627311

版权

官方文档写的导出功能，我写着报错，所以重新写了个导出功能。

导出功能一共分为两步,第一步生成文件,第二步下载文件

1、添加导出事件按钮

<el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="MyhandleExport"
          v-hasPermi="['system:student:export']"
        >自定义导出</el-button>
</el-col>

2、前端调用方法

// 查询参数
queryParams: {
   pageNum: 1,
   pageSize: 10,
   studentName: null,
   studentAge: null,
   studentHobby: null,
   studentSex: null,
   studentStatus: null,
   studentBirthday: null
}

//自定义导出数据
MyhandleExport(){
   const queryParams = this.queryParams;
   this.$modal.confirm('是否确认导出所有用户数据项？',"警告",{     //弹窗提示
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
    }).then(()