avue 按时间导出excel

_Shanene

已于 2022-12-16 10:20:30 修改

阅读量648

点赞数 1

分类专栏：小西项目功能文章标签： javascript 前端 vue.js

于 2022-11-23 10:34:18 首次发布

本文链接：https://blog.csdn.net/someday____/article/details/127995382

版权

小西项目功能专栏收录该内容

10 篇文章 0 订阅

订阅专栏

需求

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

在这里插入图片描述

编码过程

前端：

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);
    },