利用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 => {});
},