udpate

src/components/common/cityList.vue

 <template>
 <template>
   <div>
   <div>
-    <van-picker show-toolbar title="标题" :columns="columns" @change="updateCity" />
+    <van-picker show-toolbar title="标题" :columns="columns" @change="onChange" />
   </div>
   </div>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
@@ -15,6 +15,7 @@ import { Component } from "vue-property-decorator";
 })
 })
 export default class cityList extends Vue {
 export default class cityList extends Vue {
   private data: any = "";
   private data: any = "";
+
   private province: any = ""; //省份
   private province: any = ""; //省份
   private city: any = []; //市份
   private city: any = []; //市份
   private area: any = ""; //区，县
   private area: any = ""; //区，县
@@ -22,57 +23,52 @@ export default class cityList extends Vue {
   private columns: any = [
   private columns: any = [
     {
     {
       text: "",
       text: "",
-      children: []
+      children: [
+        {
+          text: "",
+          children: [{ text: "" }]
+        }
+      ]
     }
     }
   ];
   ];
   created() {
   created() {
     this.$server.EmployeeService.getCityList({}).then(res => {
     this.$server.EmployeeService.getCityList({}).then(res => {
       this.data = res;
       this.data = res;
-      //展示省份数据
-      Object.values(this.data).map((item: any) => {
+      this.data.find((item: any) => {
+        let obj = {};
         if (item.parentId == 0) {
         if (item.parentId == 0) {
           this.province = {
           this.province = {
             text: item.name,
             text: item.name,
             id: item.id
             id: item.id
           };
           };
           this.columns.push(this.province);
           this.columns.push(this.province);
-        }
-      });
-      //展示市级数据
-      this.columns.map((i: any) => {
-        Object.values(this.data).map((item: any) => {
-          let obj = {};
-          if (item.parentId != 0) {
+        } else {
           obj = {
           obj = {
             text: item.name,
             text: item.name,
             id: item.id,
             id: item.id,
             parentId: item.parentId
             parentId: item.parentId
           };
           };
-            // console.log(this.city)
           this.city.push(obj);
           this.city.push(obj);
-            // this.columns.children[0].push(this.city);
         }
         }
       });
       });
     });
     });
-      // console.log(this.city)
-    });
   }
   }
 
 
-  updateCity(picker: any, values: any, index: any) {
-    console.log(values);
-    picker.setColumnValues(1, this.cityData(this.city, values[0]));
-  }
-  cityData(data: any, provinceId: any) {
-    data.map((item: any) => {
-      if (item.text == provinceId) {
-        console.log(provinceId);
-        this.city = item;
+  onChange(picker: any, values: any) {
+    // console.log(values[0]);
+    // console.log(this.city)
+    // picker.setColumnValues(1, this.cityData(this.city,35));
+    picker.setColumnValues(2, this.city);
+    picker.setColumnValues(1, this.city);
   }
   }
-    });
-    return this.city.map((res: any) => {
-      console.log(res)
-      // return { text: res.name, code: res.code };
-    });
+  cityData(city: any, provinceId: any) {
+    // console.log(city)
+    // city.find((item: any) => {
+    //   if (item.parentId == provinceId) {
+    //     console.log(item);
+    //     this.city = item;
+    //   }
+    // });
   }
   }
 }
 }
 </script>
 </script>

src/router/employee/employee-router.ts

@@ -137,6 +137,15 @@ export default [
         meta: {
         meta: {
             title: '测试页面',
             title: '测试页面',
         }
         }
+    },
+    {
+        // 测试城市选择
+        path: '/cityTest',
+        name: 'cityTest',
+        component: () => import("@/views/cityTest.vue"),
+        meta: {
+            title: '测试城市列表',
+        }
     }
     }
 
 
 ]
 ]
\ No newline at end of file

src/views/cityTest.vue

+<template>
+  <div class="content">
+    <city-list />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Button, Icon, Popup, Form, Picker, Field, Toast } from "vant";
+import { Component } from "vue-property-decorator";
+import cityList from "@/components/common/cityList.vue"
+
+@Component({
+  components: {
+    [Button.name]: Button,
+    [Icon.name]: Icon,
+    [Popup.name]: Popup,
+    [Form.name]: Form,
+    [Picker.name]: Picker,
+    [Field.name]: Field,
+    cityList
+  }
+})
+export default class socialInfo extends Vue {
+  
+}
+</script>