vue-xlsx-导出数据公共组件

前沿

---

在项目实现过程中，思来想去还是将其封装为公共的组件比较好，于是就开始了。
新建一个公共的组件:ExportData文件夹下边的index.vue,里边的注释都写好了。

<template>
    <el-button type="warning"
               ref="btn" :disabled="isForBidden"
               @click='ExportData'>导出数据</el-button>
</template>

<script>
export default {
  //   tHeaderFather: [], //导出数据的header
  //   ExportListsFather: [] //导出数据的all
  //   filterArrayLists: [], //导出数据的过滤条件
  //   ExportFileName:"",    //导出的文件的名字
//   isForBidden: boolean,    //是否禁止导出按钮
  props: ["tHeaderFather", "ExportListsFather", "filterArrayLists","ExportFileName","isForBidden"],
  data() {
    return {
      //模板勿删
      list: [
        {
          author: "Carol",
          comment_disabled: true,
          content_short: "我是测试数据",
          display_time: "1974-06-19 10:01:57",
          forecast: 71.85,
          id: 1,
          importance: 2,
          pageviews: 1670,
          reviewer: "Ruth",
          status: "deleted",
          timestamp: 1126391703464,
          title: "哦i啥v就开始对方能看出来市场v恐龙世界",
          type: "JP"
        }
      ],
      listLoading: true,
      downloadLoading: false,
      filename: "",
      autoWidth: true
    };
  },
  methods: {
    ExportData() {
      console.log("导出数据");
      import("@/vendor/Export2Excel").then(excel => {
        // const tHeader = ["Id", "Title", "Author", "Readings", "Date"];    表格的表头
        // const filterVal = [
        //   "id",
        //   "title",
        //   "author",
        //   "pageviews",
        //   "display_time"
        // ]; //表格中数据与表头字段相匹配的字段
        const tHeader = this.tHeaderFather;
        const filterVal = this.filterArrayLists;
        const list = this.ExportListsFather; //导出数据的all
        const data = this.formatJson(filterVal, list);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.ExportFileName,
          autoWidth: this.autoWidth
        });
        // this.downloadLoading = false;
      });
    },
    //对数据与表头字段进行匹配
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          return v[j];
        })
      );
    }
  }
};
</script>

<style scoped>
</style>

调用页面

        <!-- 导出数据 -->
          <ExportData :tHeaderFather="tHeaderFather"
                      :isForBidden="isForBiddenExportData"
                      :ExportListsFather="ExportListsFather"
                      :filterArrayLists="filterArrayLists"
                      :ExportFileName="ExportFileName"></ExportData>
然后再data里边设置好这些数据就好了。
详情设置请看导出的详情，下方有链接

详情参考Vue-xlsx excel文件导出折腾小记