vue+elementui导出execl表格

最新推荐文章于 2023-06-21 16:53:27 发布

猪猪洗头不飘柔

最新推荐文章于 2023-06-21 16:53:27 发布

阅读量165

点赞数

文章标签： vue.js elementui javascript 负载均衡

本文链接：https://blog.csdn.net/qq_44825618/article/details/125747902

版权

效果图

在这里插入图片描述

下载文件
在这里插入图片描述

使用downloadHandler下载

样式部分

 <template>  
    <div> 
      <el-dropdown size="small" @command="handleExport">
        <el-button type="success" plain icon="el-icon-download" >导出</el-button>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="2">导出本页数据</el-dropdown-item>
            <el-dropdown-item command="3">导出全部数据</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  <template>

搜索条件

data() {
 return {
  searchForm: {
    supplierName: "",
    registeredAddress: "",
    agreementRegionGuid: null,
    pageNum: 1, // 页码
    pageSize: 10, // 每页数量
  },
 }
}

方法

methods: {
    handleExport(command) {
    //资源路径
      let url = `${baseGpm}/api/terminateProject/v1/exportTerminateProjectRecordList`;
      let data = {}
      if (command === 2) { // 导出本页
        data = clone(this.searchForm);//
        delete data.pageNum;
        delete data.pageSize;
      }else { // 导出全部
        data = {
          state: 0,
          pageNum: 1,
          pageSize: 10
        }
      }
      downloadHandler(url, 'post', data);//根据请求下载execel
    },
 }