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


最后修改:2021 年 02 月 08 日
如果觉得我的文章对你有用,请随意赞赏