1

.env.development

@@ -1 +1 @@
-VUE_APP_API_URL=http://192.168.1.14:8011/
+VUE_APP_API_URL=http://192.168.10.152:8082/

src/views/point.vue

@@ -9,7 +9,12 @@
         <el-button size="small" type="primary">点击上传</el-button>
       </el-upload>
 
-      <el-select v-model="value" placeholder="请选择">
+      <el-select
+        v-model="value"
+        placeholder="请选择"
+        filterable
+        @change="byTableName"
+      >
         <el-option
           v-for="item in tableList"
           :key="item.value"
@@ -19,11 +24,14 @@
         </el-option>
       </el-select>
       <el-cascader
+        v-model="value1"
         placeholder="试试搜索：指南"
         :options="options"
         :props="{ multiple: true }"
+        collapse-tags
         filterable
       ></el-cascader>
+      <el-button type="primary" @click="search">查询</el-button>
     </div>
     <el-table :data="tableData" style="width: 100%">
       <el-table-column
@@ -42,39 +50,63 @@ import XLSX from "xlsx";
 export default {
   data() {
     return {
+      props: { multiple: true },
       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",
-        },
-      ],
+      value: "",
+      value1: "",
+      tableList: [],
+      options: []
     };
   },
-  mounted() {
-    console.log();
+  created() {
+    this.fetch();
   },
+  mounted() {},
   methods: {
+    fetch() {
+      this.$http
+        .get("UnionTable/tableNames")
+        .then((res) => {
+          var res = res.data;
+          for (let i in res) {
+            var obj = {};
+            obj.lable = obj.value = res[i];
+            this.tableList.push(obj);
+          }
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    },
+    byTableName() {
+      this.$http
+        .post("UnionTable/columns", this.value)
+        .then((res) => {
+          console.log(res);
+          var res = res.data;
+          for (let i in res) {
+            var obj = {};
+            obj.label = obj.value = res[i];
+            console.log(obj);
+
+            this.options.push(obj);
+          }
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    },
+    search() {
+      this.$http
+        .get(`UnionTable/tableData?tableName=${this.value}&columnsName=${this.value1}`)
+        .then((res) => {
+          console.log(res);
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    },
     handleChange(file, fileList) {
       const fileReader = new FileReader();
       fileReader.onload = (ev) => {
@@ -113,7 +145,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .top {
-  width: 80%;
+  width: 60%;
   margin-top: 10px;
   display: flex;
   justify-content: space-around;