AVUE實現前端導出Excel

利用avue封裝的導出功能,實現前端導出Excel功能, 推薦第二版寫法
第一版

getData() {
  this.tableLoading = true;
  var url = "";

  if (this.showDetail) {
    url = "/admin/subsidy/subsidy_static/cidList";
  } else {
    url = "/admin/subsidy/subsidy_static/cicList";
  }
  return new Promise((resolve, reject) =>
    this.$axios({
      method: "POST",
      url: url,
      data: {
        page: this.page.currentPage,
        num: this.page.pageSize,
        vague: this.searchValue,
        ...this.searchParams
      }
    })
      .then(res => {
        this.tableLoading = false;
        this.visibleSearch = false;
        this.tableData = res.data.data;
        this.page.total = res.data.total;
        resolve("200 OK");
      })
      .catch(err => {
        reject(err);
      })
  );
},
//導出
exportExcel() {
  this.page.pageSize = 10000;
  this.getData()
    .then(res => {
      this.$refs.crud.rowExcel();
    })
    .catch(error => {
      console.log("失敗:" + error);
    });
},

第二版

getData() {
  this.tableLoading = true;
  var url = "";
  if (this.showDetail) {
    url = "/admin/subsidy/subsidy_static/midList";
  } else {
    url = "/admin/subsidy/subsidy_static/micList";
  }
  this.$axios({
    method: "POST",
    url: url,
    data: {
      page: this.page.currentPage,
      num: this.page.pageSize,
      vague: this.searchValue,
      ...this.searchParams
    }
  })
    .then(res => {
      this.tableLoading = false;
      this.visibleSearch = false;
      this.tableData = res.data.data;
      this.page.total = res.data.total;
    })
    .catch(err => {});
},
//導出
exportExcel() {
  var url = "";
  if (this.showDetail) {
    url = "/admin/subsidy/subsidy_static/midList";
  } else {
    url = "/admin/subsidy/subsidy_static/micList";
  }
  this.$axios({
    method: "POST",
    url: url,
    data: {
      page: this.page.currentPage,
      num: 10000,
      vague: this.searchValue,
      ...this.searchParams
    }
  })
    .then(res => {
      this.$export.excel({
        title: this.tableOption.title,
        columns: this.tableOption.column,
        data: res.data.data
      });
    })
    .catch(err => {});
},
發佈了49 篇原創文章 · 獲贊 15 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章