citylist

src/components/common/cityList.vue

 <template>
 <template>
   <div>
   <div>
-    <van-picker show-toolbar title="标题" :columns="columns" @change="onChange" />
+    <van-picker
+      show-toolbar
+      title="标题"
+      :columns="columns"
+      @confirm="onConfirm"
+    />
   </div>
   </div>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
@@ -15,18 +20,19 @@ 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 = ""; //区，县
 
 
   private columns: any = [
   private columns: any = [
     {
     {
-      text: "",
+      id: 0,
+      text: "请选择",
       children: [
       children: [
         {
         {
-          text: "",
-          children: [{ text: "" }]
+          id: 0,
+          text: "请选择",
+          children: [{ id: 0, text: "请选择" }]
         }
         }
       ]
       ]
     }
     }
@@ -34,32 +40,67 @@ export default class cityList extends Vue {
   created() {
   created() {
     this.$server.EmployeeService.getCityList({}).then(res => {
     this.$server.EmployeeService.getCityList({}).then(res => {
       this.data = res;
       this.data = res;
+      //组建省数据
       this.data.find((item: any) => {
       this.data.find((item: any) => {
         let obj = {};
         let obj = {};
         if (item.parentId == 0) {
         if (item.parentId == 0) {
           this.province = {
           this.province = {
+            id: item.id,
             text: item.name,
             text: item.name,
-            id: item.id
+            children: [
+              {
+                id: 0,
+                text: "请选择",
+                children: [
+                  {
+                    id: 0,
+                    text: "请选择"
+                  }
+                ]
+              }
+            ]
           };
           };
           this.columns.push(this.province);
           this.columns.push(this.province);
-        } else {
-          obj = {
-            text: item.name,
-            id: item.id,
-            parentId: item.parentId
-          };
-          this.city.push(obj);
         }
         }
       });
       });
+      //组建市数据 [{"name":"北京市","id":1,"parentId":0}]
+      this.columns.forEach((element: any) => {
+        let child: any = [];
+        this.data.forEach((data: any) => {
+          if (data.parentId == element.id && element.id > 0) {
+            child.push({
+              id: data.id,
+              text: data.name,
+              children: [{ id: 0, text: "请选择", children: [] }]
+            });
+          }
+        });
+        element.children.push(...child);
+      });
+
+      //组建县级数据
+      this.columns.forEach((element: any) => {
+        element.children.forEach((child: any) => {
+          let child_son: any = [];
+          this.data.forEach((data: any) => {
+            if (child.id > 0 && child.id == data.parentId) {
+              child_son.push({
+                id: data.id,
+                text: data.name,
+                children: []
+              });
+            }
+          });
+          child.children.push(...child_son);
+        });
+      });
     });
     });
   }
   }
 
 
-  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);
+  getChildren(arr: any) {}
+
+  onConfirm(values: any) {
+    console.log(values);
   }
   }
   cityData(city: any, provinceId: any) {
   cityData(city: any, provinceId: any) {
     // console.log(city)
     // console.log(city)