point

src/App.vue

@@ -70,56 +70,55 @@ export default {
   },
 };
 </script>
-<style lang="sass" scoped>
-#app
-  width: 100%
-  height: 100%
-
-#mychart
-  height: 500px
-  width: 500px
-
-.el-header
-  position: sticky
-  top: 0
-  z-index: 999
-
-.el-footer
-  background-color: rgb(84, 92, 100)
-  color: aliceblue
-  position: fixed
-  bottom: 0
-  width: 100%
-  z-index: 999
-  text-align: center
-  line-height: 60px
+<style lang="scss" scoped>
+#app {
+  width: 100%;
+  height: 100%;
+}
+#mychart {
+  height: 500px;
+  width: 500px;
+}
+.el-header {
+  position: sticky;
+  top: 0;
+  z-index: 999;
+}
+.el-footer {
+  background-color: rgb(84, 92, 100);
+  color: aliceblue;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  z-index: 999;
+  text-align: center;
+  line-height: 60px;
+}
 </style>
-<style lang="sass">
+<style lang="scss">
 body,
 .el-header,
 .el-main,
-.el-footer
-  margin: 0 !important
-  padding: 0 !important
-  height: 100%
-
-::-webkit-scrollbar
-
-  width: 6px
-  height: 6px
-  background-color: #F5F5F5
-
+.el-footer {
+  margin: 0 !important;
+  padding: 0 !important;
+  height: 100%;
+}
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background-color: #f5f5f5;
+}
 /*定义滚动条轨道 内阴影+圆角*/
-::-webkit-scrollbar-track
-
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3)
-  border-radius: 10px
-  background-color: #F5F5F5
-
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  background-color: #f5f5f5;
+}
 /*定义滑块 内阴影+圆角*/
-::-webkit-scrollbar-thumb
-
-  border-radius: 10px
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3)
-  background-color: #555
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #555;
+}
 </style>

src/views/point.vue

@@ -1,14 +1,31 @@
 <template>
   <div>
-    <el-upload
-      class="upload-demo"
-      action="https://jsonplaceholder.typicode.com/posts/"
-      :on-change="handleChange"
-    >
-      <el-button size="small" type="primary">点击上传</el-button>
-    </el-upload>
+    <div class="top">
+      <el-upload
+        class="upload-demo"
+        action="https://jsonplaceholder.typicode.com/posts/"
+        :on-change="handleChange"
+      >
+        <el-button size="small" type="primary">点击上传</el-button>
+      </el-upload>
 
-    <el-table :data="tableData" style="width:100%">
+      <el-select v-model="value" placeholder="请选择">
+        <el-option
+          v-for="item in tableList"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-cascader
+        placeholder="试试搜索：指南"
+        :options="options"
+        :props="{ multiple: true }"
+        filterable
+      ></el-cascader>
+    </div>
+    <el-table :data="tableData" style="width: 100%">
       <el-table-column
         v-for="i in arr"
         :key="i"
@@ -27,6 +44,31 @@ export default {
     return {
       tableData: [{}],
       arr: [],
+      value:'',
+      tableList:[
+         {
+          value: "table",
+          label: "table1",
+        },
+        {
+          value: "table2",
+          label: "table2",
+        },
+      ],
+      options: [
+        {
+          value: "table",
+          label: "ID",
+        },
+        {
+          value: "table1",
+          label: "Name",
+        },
+        {
+          value: "table2",
+          label: "table2",
+        },
+      ],
     };
   },
   mounted() {
@@ -45,16 +87,18 @@ export default {
           let sheet = Object.keys(workbook.Sheets)[0];
           const json = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]); //获得以第一列为键名的sheet数组对象
           console.log(json);
-          var arr=[];
+          var arr = [];
           for (let v in json) {
-              if(v>100){break;}
+            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.arr = arr;
           this.$nextTick(() => {
             this.tableData = json;
           });
@@ -66,4 +110,13 @@ export default {
     },
   },
 };
-</script>
+</script>
+<style lang="scss" scoped>
+.top {
+  width: 80%;
+  margin-top: 10px;
+  display: flex;
+  justify-content: space-around;
+  overflow: hidden;
+}
+</style>