temp: table-preview

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <el-row>
-      <el-col :span="12"><full-table /></el-col>
+      <el-col :span="12"><full-table/></el-col>
       <el-col :span="12"></el-col>
     </el-row>
   </div>

src/components/FullTable.vue

@@ -34,6 +34,9 @@
         ></el-option>
       </el-select>
       <el-button @click="showPreview">选择解析区域</el-button>
+      <el-dialog title="预览表格" width="80%" :visible.sync="previewVisible">
+        
+      </el-dialog>
     </el-main>
   </el-container>
 </template>
@@ -48,10 +51,11 @@ export default {
       loadFileName: "",
       table: null,
       currentSheet: "",
+      previewVisible: false,
     };
   },
   computed: {
-    isImportable: function(){
+    isImportable: function () {
       return this.loadFileName === null;
     },
     isNotEditable: function () {
@@ -66,6 +70,7 @@ export default {
     },
   },
   methods: {
+    // Load the excel file into temporary buffer in explorer
     loadFile: function (file) {
       this.loadFileName = file.name;
       let fRead = new FileReader();
@@ -75,6 +80,7 @@ export default {
       };
       fRead.readAsBinaryString(file.raw);
     },
+    // Load the table from buffer to this.table
     importTable: function () {
       localforage.getItem("LoadedTable").then((res) => {
         if (res !== null) {
@@ -83,13 +89,21 @@ export default {
       });
       console.log("importing table");
     },
-    showPreview: function() {
-      let toShow = this.table.sheets[this.currentSheet];
-      XLSX.utils.sheet_to_formulae()
-    }
+    // 
+    showPreview: function () {
+      var tabName = this.table.SheetNames[this.currentSheet]
+      var sheetByRow = XLSX.utils.sheet_to_json(this.table.Sheets[tabName]);
+      
+      this.previewVisible = true;
+    },
   },
 };
 </script>
 
 <style scoped>
+td {
+  min-width: 10px;
+  border: 1px;
+  border-block-color: #cccccc;
+}
 </style>