前提: 參考 潘大佬的程式碼, 別忘了下載中文分支的, 執行找到該頁面

父傳子 傳值

理解: 方法等寫在子元件, 父元件使用封裝的元件時候, 把表格資料傳給子元件. 使用的直接全貼了, 方便自己以後看

father程式碼

// 匯出excel表格 父元件 -- 主要看元件使用 和 元件傳值
<template>
  <div class="contentWrap purchaseMange">
     <el-row class="handlePart">
      <ul class="handleCont blod">
        <!-- 匯出按鈕元件使用 -->
        <exportExcel
          :exceltitle
 
="excelTitle"
          :exceldata="excelData"
          :filterval="filterVal"
          :filename="fileName"
        />

<el-row>
      <el-table  :data="tableData">      
        <el-table-column type="index"  label="序號"></el-table-column>

<!--迴圈渲染出來真的好用 如果這裡面有操作項 可以if-else使用<template slot-scope="scope">{{ scope.row.}}</template>-->
        <el-table-column v-for
 
="(item, index) in column"
                         :label="item.title"
                         :prop="item.key"
                         :fixed="item.fixed"
                         :minWidth="item.width ? item.width : 120"
                         :key="index"></el-table-column>
      </el-table>
    </el-row>
      </ul>
  </div>
</template>

<script>    
//
 
 引入子元件    
import ExportExcel from "@/components/excel/exportExcel.vue";

export default {
  components: {
    ExportExcel // 註冊元件
  },
  data() {
    return {
      // 匯出資料標題
      excelTitle: [],
      // 匯出資料內容
      excelData: null,
      // 匯出資料的引數值 為了filterVal
      filterVal: [],
      // 匯出資料名稱
      fileName: "",

        // 頁面表格資料
        // 列資料
         column: [
        { title: "訂單編號", key: "cityNum", width: 120, fixed: "left"},
        { title: "業務日期", key: "createTime", width: 120 },
        ............
        ]
    };
  },
  created() {
    // 初始化渲染資料 根據需要改動
        this.handleGetlist();
    },

  methods: {
   // 獲取資料
    
    handleGetlist (param) {
       //  走個ajax 成功開始

           // 獲取到資料 
           this.excelData = res.data ;
    
           // 標題需要做迴圈處理  表格上面這樣寫更方便獲取標題和內容
            this.column.forEach((element, index) => {
                  // 匯出資料內容
                  this.excelTitle.push(element.title);
                  // 匯出資料的引數值 為了filterVal
                  this.filterVal.push(element.key);
                  // 匯出excel的表名
                  this.fileName = "根據需求自定義一個表";
                });

       //  走個ajax 成功結束

      }
  },

};
</script>

child程式碼

// 子元件 匯出excel功能
<template>
  <li @click="hanleExport">匯出</li>
</template>
<script>
export default {
  props: [
    // 匯出資料標題
    "exceltitle",
    // 匯出資料內容
    "exceldata",
    // 匯出資料的引數值 為了filterVal
    "filterval",
    // 匯出資料名稱
    "filename"
  ],
  methods: {
    // 匯出
    hanleExport(data) {
      // 匯出檔案是 ‘業務日期起-業務日期止’採購訂單.xlsx”
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const excelData = this.exceldata;
        const filterVal = this.filterval;
        // 格式化資料 過濾並轉換所需要的資料
        const data = this.formatJson(filterVal, excelData);

        excel.export_json_to_excel({
          header: this.exceltitle,
          data,
          filename: this.filename
        });
        this.downloadLoading = false;
      });
    },

    // 格式化資料 過濾並轉換
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    }
  }
};
</script>
<style></style>