L'applet uniapp utilise le sélecteur de sélection de province, ville, comté et district

Le cadre est uview2.0

Rendus :

1. Téléchargez le fichier de la ville

fichier  city.js    mot de passe m1y8

2. Importer des fichiers de ville

Le fichier est placé dans le fichier utils dans le répertoire racine du projet

spectacle de code comme ci-dessous

html：

S'il est utilisé dans le composant de formulaire du framework comme moi et qu'il existe une zone de saisie, le clavier logiciel et le sélecteur peuvent apparaître en même temps.Dans ce cas, vous pouvez vous référer à l'applet uniapp pour empêcher le clavier logiciel ne s'affiche pas lorsque la zone de saisie est cliquée .

Il est fortement recommandé d'ajouter l'attribut disabled à la balise d'entrée pour empêcher le clavier logiciel de s'afficher !

<u--form labelPosition="left">
    <u-form-item label="省市县区:" borderBottom labelWidth="70" @tap="cityShow = true">
	    <u--input v-model="cityName" border="none" placeholder="请选择省市县区"></u--input>
	    <!-- 城市选择 -->
	    <u-picker :show="cityShow" ref="uPicker" :columns="cityList" @confirm="cityConfirm" 
        @change="changeHandler" @cancel="cityShow = false"></u-picker>
    </u-form-item>
</u--form>

js： 

<script>
	// 导入城市js文件
	import cityData from '@/utils/city.js'
	export default {
		data() {
			return {
				cityName: "请选择省市县区",

				// 城市选择器
				cityShow: false,
				// 打开选择器显示默认城市
				cityList: [],
 
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: [],
			};
		},
		onLoad() {
			// 城市选择器初始化
			this.initCityData();
		},
		methods: {
			// 城市选择器
			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]);
				}
			},

			// 单击确认按钮时执行
			cityConfirm(e) {
				// 输出数组 [省, 市, 区]
				console.log(e.value);
				this.cityName = e.value.join("-");
				// 隐藏城市选择器
				this.cityShow = false;
			},
		}
	}
</script>