1. "excelBtn":true,"excelBtnText":'导出文案',参考官方文档:https://avuejs.com/doc/crud/crud-textdata=》option 。这个方法只能导出当前页面显示的数据。带有字典的字段需要注意使用$。
{ "label": "品牌", "prop": "$brand", }
2. 自定义导出1
导出导入 data() { return { searchForm: {}, tableData: [], page: { total: 0, // 总页数 currentPage: 1, // 当前页数 pageSize: 20 // 每页显示多少条 }, tableLoading: false, tableOption: tableOption, excelOption: excelOption, selectionRows: [], exportLoading: false } } exportExcel(){ console.log(this.tableOption) let today = new Date(); this.tableLoading = true; if (this.selectionRows.length > 0) { this.$export.excel({ title: excelOption.title + today.getFullYear() + today.getMonth() + today.getDate(), columns: excelOption.column, data: this.selectionRows }); this.tableLoading = false; } else { exportExcel(this.searchForm).then(res => { this.$export.excel({ title: excelOption.title + today.getFullYear() + today.getMonth() + today.getDate(), columns: excelOption.column, data: res.data.data }); this.tableLoading = false; }).catch(() => { this.tableLoading = false; }) } } export const excelOption = { title: '手机型号信息', "column": [ { "label": "创建时间", "prop": "createDate", }, { "label": "品牌", "prop": "$brand", }, { "label": "系列", "prop": "series" }, { "label": "型号", "prop": "model", }, { "label": "机型图片", "prop": "imgUrl", }, { "label": "运存", "prop": "$ram", }, { "label": "内存", "prop": "$rom", }, { "label": "颜色", "prop": "color", }, { "label": "售价", "prop": "price", }, { "label": "上市时间", "prop": "marketDate", }, { "label": "是否可用", "prop": "$delFlag", }] }; //接口地址 export function exportExcel(query) { return request({ url: '/pmp/modelinfo/export', method: 'get', params: query }) }
3. 自定义导出2
导出表单数据data() { return { searchForm: {}, tableData: [], page: { total: 0, // 总页数 currentPage: 1, // 当前页数 pageSize: 20 // 每页显示多少条 }, tableLoading: false, tableOption: tableOption, } }, handleOutput: async function (row, index, searchForm) { const res = await exportExcel(this.searchForm) downloadExcel(res) }, export function downloadExcel (data) { // 下载模板 if (!data) { return } console.log('data :', data, data.headers['content-disposition'].split(';')[1].split('=')[1]); const fileName = data.headers['content-disposition'].split(';')[1].split('=')[1]; let blob = new Blob([data.data], {type: "application/vnd.ms-excel"}); console.log(blob) let url = window.URL.createObjectURL(blob); let link = document.createElement('a'); link.style.display = 'none'; link.href = url; link.setAttribute('download', decodeURI(fileName)); document.body.appendChild(link); link.click() } export function exportExcel(query) { return request({ url: '/commonplatform/boc/bocreport/export-excel', method: 'post', responseType: 'blob', params: query }) }
其他:参考:https://blog.csdn.net/XU441520/article/details/103365529
//导入 importfile(params) { this.$http.post("/bb/AA/importExcle", params).then(({data: res}) => { if (res.code == 0) { this.$message({ type: 'success', message: res.msg }) this.confirmVisible = false; this.getDataList(); } else { this.$message({ type: 'error', message: res.msg }) this.confirmVisible = false; } this.handleRemove(); }) },
//导出 exportExcel() { this.$export.excel({ title: "商户pos机", columns: [ { label: "pos机编号", prop: "trm_id" }, { label: "市场经营房号", prop: "stall_no" }, { label: "商户名称", prop: "merchant_name" }, { label: "绑定时间", prop: "update_time" } ], data: this.tableData }); }, 原文链接:https://blog.csdn.net/qq_42816550/article/details/103832911