区域选择

package-lock.json

@@ -3089,6 +3089,11 @@
       "integrity": "sha1-M1bMoZyIlUTy16le1JzlCKDs9VI=",
       "dev": true
     },
+    "china-area-data": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/china-area-data/-/china-area-data-5.0.1.tgz",
+      "integrity": "sha512-BQDPpiv5Nn+018ekcJK2oSD9PAD+E1bvXB0wgabc//dFVS/KvRqCgg0QOEUt3vBkx9XzB5a9BmkJCEZDBxVjVw=="
+    },
     "chokidar": {
       "version": "3.5.2",
       "resolved": "https://registry.nlark.com/chokidar/download/chokidar-3.5.2.tgz",
@@ -4633,6 +4638,15 @@
       "integrity": "sha1-rrVFle3ArlZyH/ZCj/60yIXAnlc=",
       "dev": true
     },
+    "element-china-area-data": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/element-china-area-data/-/element-china-area-data-5.0.2.tgz",
+      "integrity": "sha512-vLQuvOKJy/uiX7MRHEk3x/j09hipuIl6DJ/C4XFUG7D7Pj3O47sy+Y6aAArM6k9v8cD9UX6e+yz2S4J+IPnZ8g==",
+      "requires": {
+        "china-area-data": "^5.0.1",
+        "lodash-es": "^4.17.15"
+      }
+    },
     "element-ui": {
       "version": "2.15.3",
       "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.3.tgz",
@@ -7117,6 +7131,11 @@
       "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=",
       "dev": true
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.nlark.com/lodash.debounce/download/lodash.debounce-4.0.8.tgz",

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "echarts": "^4.9.0",
+    "element-china-area-data": "^5.0.2",
     "element-ui": "^2.15.3",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",

src/components/areaList.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <el-cascader
+        size="large"
+        :options="options"
+        v-model="selectedOptions"
+        @change="handleChange">
+    </el-cascader>
+  </div>
+</template>
+
+<script>
+import { regionData } from 'element-china-area-data';
+export default {
+  name: "areaList",
+  data() {
+    return {
+      options: regionData,
+      selectedOptions: [],
+    }
+  },
+  methods: {
+    handleChange (value) {
+      console.log(value)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/pastureData/Home.vue

@@ -34,6 +34,9 @@
         <el-form-item>
           <el-button>查询</el-button>
         </el-form-item>
+        <el-form-item>
+          <area-list></area-list>
+        </el-form-item>
       </el-form>
     </div>
     <div class="box_table">
@@ -105,6 +108,7 @@
 
 <script>
 import TableFooter from "../../components/TableFooter";
+import areaList from "../../components/areaList";
 export default {
   name: "Home",
   data() {
@@ -176,7 +180,8 @@ export default {
     }
   },
   components: {
-    TableFooter
+    TableFooter,
+    areaList
   },
   methods: {
     // 修改size