vue 列表导出excel

在Vue中实现列表导出Excel的功能可以通过以下步骤来完成：

1. 首先，在Vue的前端界面中添加一个导出按钮，可以使用Element UI框架提供的`el-button`组件。例如：

<el-button type="primary" icon="el-icon-download" size="small" @click="exportExcel">导出</el-button>

[1]

2. 在Vue组件中引入用于构造Excel表格的JS文件。可以使用`import`语句将`export_json_to_excel`方法引入到当前组件中。例如：

import { export_json_to_excel } from '@/util/exportExcel.js'

[2]

3. 在Vue组件中编写导出Excel的方法。可以使用`exportExcel`方法来处理导出操作。在该方法中，首先调用后端接口获取需要导出的数据，然后根据数据构造Excel表格的相关参数，最后调用`export_json_to_excel`方法实现导出。例如：

exportExcel() {
  findList({ userName: this.query.userName, page: this.page.currentPage, size: 9999999 })
    .then(res => {
      let json_data = res.data;
      if (json_data.length <= 0) {
        this.$message.error('导出数据为空，请先搜索内容');
        return false;
      }
      let tHeader = ["单号", "状态", "部门", "工号", "姓名", "邮箱"];
      let filterVal = ["objectId", "status", "dept", "usrId", "userName", "email"];
      let excelList = json_data;
      let filename = '申请明细列表';
      excelNameTime();
      let data = this.formatJson(filterVal, excelList);
      export_json_to_excel({ header: tHeader, data, filename });
    })
    .catch(error => {
      reject(error);
    });
},

[3]

4. 在Vue组件中编写数据处理方法。可以使用`formatJson`方法对数据进行处理，例如将状态字段的数字转换为对应的文字。例如：

formatJson(filterVal, excelList) {
  let that = this;
  return excelList.map(v => filterVal.map(j => {
    if (j === "status") {
      if (v.status == '0') {
        return "待审批";
      } else if (v.status == '1') {
        return '审批通过';
      } else if (v.status == '2') {
        return "审批不通过";
      }
    }
    return v[j];
  }));
},

通过以上步骤，你可以在Vue中实现列表导出Excel的功能。