省市二級聯動選擇器

代碼：

 1 <template>
 2     <view>
 3         <div class="item-content apply-city">
 4             <div class="item-title label">省市選擇</div>
 5             <picker
 6                 class="item-input city-picker"
 7                 mode="multiSelector"
 8                 @change="bindMultiPickerChange"
 9                 @columnchange="bindMultiPickerColumnChange"
10                 @click="selectCity"
11                 :value="multiIndex"
12                 :range="multiArray"
13             >
14                 <input disabled="true" placeholder="請選擇城市" :value="citysName" />
15             </picker>
16             <a href="#"><i class="icon-right-no-bg"></i></a>
17         </div>
18     </view>
19 </template>

 1 <script>
 2 export default {
 3     data() {
 4         return {
 5             multiIndex: [0, 0],
 6             multiArray: [[], []],
 7             provinceArray: [],
 8             cityArray: [],
 9             citysName: ''
10         };
11     },
12     onLoad(opts) {
13         let _this = this;
14         _this.getProvince();
15         _this.getCity();
16     },
17     methods: {
18         getProvince() {
19             let _this = this;
20             _this.$ajax(_this.$api.GetProvinceList, {}, '獲取省分列表', function(res) {
21                 if (res.data && res.data.data && res.data.data.length > 0) {
22                     _this.provinceArray = res.data.data;
23                 }
24                 for (let i = 0; i < _this.provinceArray.length; i++) {
25                     _this.multiArray[0].push(_this.provinceArray[i].name);
26                 }
27             });
28         },
29         getCity() {
30             let _this = this;
31             _this.$ajax(_this.$api.GetCityList, {}, '獲取城市列表', function(res) {
32                 if (res.data && res.data.data && res.data.data.length > 0) {
33                     _this.cityArray = res.data.data;
34                 }
35                 for (let i = 0; i < _this.cityArray.length; i++) {
36                     if (_this.cityArray[i].code.indexOf(_this.provinceArray[0].code) == 0) {
37                         _this.multiArray[1].push(_this.cityArray[i].name);
38                     }
39                 }
40             });
41         },
42         selectCity() {
43             let _this = this;
44             if (_this.flag == 0) {
45                 _this.citysName = '北京 北京';
46             }
47         },
48         bindMultiPickerColumnChange(e) {
49             let _this = this;
50             _this.flag = 1;
51             _this.multiIndex[e.detail.column] = e.detail.value;
52             switch (e.detail.column) {
53                 case 0: {
54                     _this.multiArray[1].length = 0;
55                     _this.multiIndex[1] = 0;
56                     if (e.detail.value >= 0) {
57                         _this.multiIndex[0] = e.detail.value;
58                         for (let j = 0; j < _this.cityArray.length; j++) {
59                             if (_this.cityArray[j].code.indexOf(_this.provinceArray[e.detail.value].code) == 0) {
60                                 _this.multiArray[1].push(_this.cityArray[j].name);
61                             }
62                         }
63                     }
64                     break;
65                 }
66                 case 1: {
67                     _this.multiIndex[1] = e.detail.value;
68                     break;
69                 }
70             }
71             _this.citysName = _this.multiArray[0][_this.multiIndex[0]] + ' ' + _this.multiArray[1][_this.multiIndex[1]];
72         },
73         bindMultiPickerChange(e) {
74             this.multiIndex = e.detail.value;
75         }
76     }
77 };
78 </script>

 

效果：