导出excel

src/main.js

@@ -11,6 +11,10 @@ Vue.prototype.$http = http
 
 Vue.config.productionTip = false
 
+
+import JsonExcel from 'vue-json-excel'
+Vue.component('downloadExcel', JsonExcel)
+
 new Vue({
   router,
   store,

src/views/point.vue

@@ -3,7 +3,8 @@
     <div class="top">
       <el-upload
         class="upload-demo"
-        action="https://jsonplaceholder.typicode.com/posts/"
+        action="#"
+        :show-file-list="false"
         :on-change="handleChange"
       >
         <el-button size="small" type="primary">点击上传</el-button>
@@ -25,15 +26,26 @@
       </el-select>
       <el-cascader
         v-model="value1"
-        placeholder="试试搜索：指南"
+        placeholder="字段"
         :options="options"
         :props="{ multiple: true }"
         collapse-tags
         filterable
       ></el-cascader>
-      <el-button type="primary" @click="search">查询</el-button>
+      <el-button type="primary" @click="search" >查询</el-button>
+
+      <download-excel
+        class="export-excel-wrapper"
+        :data="tableData"
+        :fields="json_fields"
+        :name="excelTitle"
+         :disabled='disabled'
+      >
+        <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
+        <el-button type="primary">导出EXCEL</el-button>
+      </download-excel>
     </div>
-    <el-table :data="tableData1" style="width: 100%">
+    <el-table :data="tableData" style="width: 100%">
       <el-table-column
         v-for="i in arr"
         :key="i"
@@ -50,14 +62,25 @@ import XLSX from "xlsx";
 export default {
   data() {
     return {
+      disabled:true,
+      excelTitle:'' || 'excel',
       props: { multiple: true },
       tableData: [{}],
-      tableData1:[],  
+      excelData: [],
       arr: [],
       value: "",
       value1: "",
       tableList: [],
-      options: []
+      options: [],
+      json_fields: {},
+      json_meta: [
+        [
+          {
+            " key ": " charset ",
+            " value ": " utf- 8 ",
+          },
+        ],
+      ],
     };
   },
   created() {
@@ -81,6 +104,7 @@ export default {
         });
     },
     byTableName() {
+      this.options = [];
       this.$http
         .post("UnionTable/columns", this.value)
         .then((res) => {
@@ -100,20 +124,45 @@ export default {
     },
     search() {
       this.$http
-        .post("UnionTable/tableData",
-        {
-          tableName:this.value,
-          columnsName:this.value1,
-          excelData:this.tableData
+        .post("UnionTable/tableData", {
+          tableName: this.value,
+          columnsName: this.value1.flat(2),
+          excelData: this.excelData,
         })
         .then((res) => {
-          console.log(res);
+          console.log(res.data);
+          var json = res.data;
+          var arr = [];
+          for (let v in json) {
+            if (v > 100) {
+              break;
+            }
+            for (let k in Object.keys(json[v])) {
+              if (arr.indexOf(Object.keys(json[v])[k]) == -1) {
+                arr.push(Object.keys(json[v])[k]);
+              }
+            }
+          }
+          this.arr = arr;
+          console.log(arr)
+          var cluHead = {};
+          for(let i in arr){
+            cluHead[arr[i]] = arr[i]
+          }
+          console.log(cluHead)
+          this.json_fields = cluHead
+          this.$nextTick(() => {
+            this.tableData = json;
+            this.disabled = false
+          });
         })
         .catch(function (error) {
           console.log(error);
         });
     },
+
     handleChange(file, fileList) {
+      this.excelTitle = file.name
       const fileReader = new FileReader();
       fileReader.onload = (ev) => {
         try {
@@ -121,24 +170,11 @@ export default {
           const workbook = XLSX.read(data, {
             type: "binary",
           });
-          console.log(workbook);
           let sheet = Object.keys(workbook.Sheets)[0];
           const json = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]); //获得以第一列为键名的sheet数组对象
-          console.log(json);
-          var arr = [];
-          for (let v in json) {
-            if (v > 100) {
-              break;
-            }
-            for (let k in Object.keys(json[v])) {
-              if (arr.indexOf(Object.keys(json[v])[k]) == -1) {
-                arr.push(Object.keys(json[v])[k]);
-              }
-            }
-          }
-          this.arr = arr;
           this.$nextTick(() => {
-            this.tableData = json;
+            console.log(json);
+            this.excelData = json;
           });
         } catch (e) {
           console.log(e);