Vue中基于iview组件——导出Excel

 订餐系统中关于Table表格的导出功能如下：

一个button 的导出按钮：

  <Button type="primary" @click="exportData" >导出</Button>

 data: function () {
      return {
       
        // 获取到的所有数据，用于导出
        exportdata: [],
      
        historyColumns: [{
            title: "卡号",
            key: "cardId"
          },
          {
            title: "姓名",
            key: "ownerName"
          },
          {
            title: "订单编号",
            key: "orderid"
          },
          {
            title: "总金额",
            key: "totalcost"
          },
          {
            title: "订餐时间",
            key: "orderTime"
          }
        ],
       
      };
    },

导出方法如下： 

 exportData() {
      this.$refs.myTable.exportCsv({
        filename: "历史订单",//导出Excel的名字
        original: false,
        columns: this.historyColumns,//table的每一列
        // orderid是订单编号，此处进行转换，因为orderid过长，不转换会变成科学计数法的格式
        data: this.exportdata.map(k => {
          k.orderid = "\t" + k.orderid;
          return k;
        })
      });
    },

效果展示：