avue 按时间导出excel

以你之姓@ 2023-10-03 21:42 15阅读 0赞

#### 目录 ####

*   *  需求
     *  编码过程
     *   *  前端：
         *   *  html:
             *  js：对应@click="handleExport"方法

### 需求 ###

现状：后端web端商城订单查询支持列表根据用户搜索条件，列表展示对应的内容但不支持条件搜索导出。  
优化内容： 根据时间的搜索条件导出。

![在这里插入图片描述][8a2ca96023e44c9f99098c54520c99ba.png]

### 编码过程 ###

#### 前端： ####

##### html: #####

<avue-crud
            ref="crud"
            v-model="form"
            :page.sync="page"
            :data="tableData"
            :permission="permissionList"
            :table-loading="tableLoading"
            :option="tableOption"
            @on-load="getPage"
            @refresh-change="refreshChange"
            @row-update="handleUpdate"
            @row-save="handleSave"
            @row-del="handleDel"
            @sort-change="sortChange"
            @search-change="searchChange"
            @date-change="dateChange"
          >
            <template slot="menuLeft">
              <el-button
                type="primary"
                icon="el-icon-download"
                size="small"
                @click="handleExport"
                >导出订单</el-button
              >
            </template>

##### js：对应@click="handleExport"方法 #####

/** 导出按钮操作 */
        handleExport() {
        
          this.download(
            "mall/orderinfo/export",
            {
        
              ...this.paramsSearch,//请求参数
            },
            `order_${
          new Date().getTime()}.xlsx`
          );
        },

可以看出事通过**this.paramsSearch**来进行前后端传参的，因此，找到时间对应的**dateChange**方法，如下所示:

dateChange(date) {
        
          if (date) {
        
            this.date = date;
    
          } else {
        
            this.date = [];
          }
          this.getPage(this.page);
        },

加上时间请求参数即可：

dateChange(date) {
        
          if (date) {
        
            this.date = date;
            this.paramsSearch.beginTime=this.date[0];
            this.paramsSearch.endTime=this.date[1];
          } else {
        
            this.date = [];
          }
          this.getPage(this.page);
        },

[8a2ca96023e44c9f99098c54520c99ba.png]: https://img-blog.csdnimg.cn/8a2ca96023e44c9f99098c54520c99ba.png