uniapp - Picker city selector

renderings

city.js file:
Link: https://pan.baidu.com/s/1ceYDb5AMa-OrxjRq4NEigQ?pwd=x8al
Extraction code: x8al

html：

 <view>
        <button @click.stop="show = true">城市选择器</button>
        <!-- 城市选择器 -->
	    <u-picker :show="show" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler" @cancel="show = false"></u-picker>
    </view>
js: 

```js

<script>
    // 导入城市js文件
    import cityData from '@/utils/city.js'
 
    export default {
      
      
        data() {
      
      
            return {
      
      
                //显示选择器
                show: false,
				// 打开选择器显示默认城市
				cityList: [],
				
                
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: []
            }
        },
        onLoad(){
      
      
            // 城市选择器初始化
			this.initCityData();
        },
        method: {
      
      
            initCityData(){
      
      
                // 遍历城市js
				cityData.forEach((item1, index1) =>{
      
      
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);
					
					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) =>{
      
      
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) =>{
      
      
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;
					
					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1,this.cityLevel2[0],this.cityLevel3[0][0]);
			},
            // 选中时执行
            changeHandler(e) {
      
      
				const {
      
      
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) {
      
       // 选择第一列数据时
                    // 设置第二列关联数据
					picker.setColumnValues(1, this.cityLevel2[index]);
                    // 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
				}else if(columnIndex === 1){
      
      // 选择第二列数据时
                    // 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
				}
			},
            // 单击确认按钮时执行
			confirm(e) {
      
      
                // 输出数组 [省, 市, 区]
				console.log(e.value);
                // 隐藏城市选择器
				this.show = false;
			}
        }
    }
</script>