element-ui导出excel表格,代码基于vue-element-admin-master

1、安装插件

npm install js-xlsx file-saver -S
npm install script-loader -S -D //它帮我们挂载了,不需要引入到main.js里面

2、在src下创建一个文件夹vendor,并且引入Export2Excel.js

在这里插入图片描述
此处附上我项目中vendor的链接,直接拷过去就好:
vendor文件拷贝链接

3、html中表格


  
  
  
  
  
  
    
  
  
    
  

4、button下载按钮

 Export

5、tableDate中的数据,这个可根据自己的要求来

  tableData: [
    {
      id: 1,
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
      tag: "家"
    },
    {
      id: 2,
      date: "2016-05-04",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1517 弄",
      tag: "公司"
    },
    {
      id: 3,
      date: "2016-05-01",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1519 弄",
      tag: "家"
    },
    {
      id: 4,
      date: "2016-05-03",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1516 弄",
      tag: "公司"
    },
    {
      id: 5,
      date: "2016-04-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1516 弄",
      tag: "公司"
    }
  ],

6、下载按钮绑定的方法handleDownload

  handleDownload() {
  // this.downloadLoading = true;
  import("@/vendor/Export2Excel").then(excel => {
    const tHeader = ["id", "date", "name", "address", "tag"];//要导出后表头是什么,可以跟tableDate中的表头不一致
    const filterVal = [
      "id",
      "date",
      "name",
      "address",
      "tag"
    ];
    const data = this.formatJson(filterVal, this. tableData)
   
    // const data = this.tableData;
    excel.export_json_to_excel({
      header: tHeader,
      data,
      filename: "table-list"  //导出文件的名,自定义就好
    });
    // this.downloadLoading = false;
  });
},
//下载方法中,需要用到的格式化json的方法
formatJson(filterVal, jsonData) {
  return jsonData.map(v =>
    filterVal.map(j => {
      if (j === "id") {  //此处如没有要格式化的列,可以不用此判断
        // return parseTime(v[j])
        return v[j];
      } else {
        return v[j];
      }
    })
  );
},

你可能感兴趣的:(element-admin)