uview2.x u-picker省市二级联动

提示：若干个相关联的事物，一个运动或变化时，其他的也跟着运动或变化叫做联动。

注：此城市联动是结合uView组件进行的二级城市联动

目录

一、结合组件使用

二、使用方法

注意：

总结

---

一、结合组件使用

Picker 选择器 | uView 2.0

示例：

<!-- 选择器 -->
	<u-picker :show="show" ref="uPicker" title="选择城市" keyName="name" :columns="cityList" @confirm="confirm"
		@change="changeHandler" @cancel="close">
	</u-picker>

	<u-picker :show="show1" title="选择大厅" :columns="holldata" keyName="name" @confirm="confirm1" @cancel="show1 = false">
	</u-picker>

二、使用方法

代码如下（示例）：

export default {
		data() {
			return {
				stausBarHeight: uni.getStorageSync('stausBarHeight'),
				show: false, //城市弹出
				show1: false, //大厅弹出
				
				cityListzc:[],  // 暂存（仅供初次临时存储）
				cityList: [
					// [{'name':"111"},{'name':"122"}],
					// [{'name':"211"},{'name':"222"}]
				], //城市存放处
				city: "", //城市
				
				holldata:[],  // 查询大厅数据
				holl:'',  // 查询大厅
				cityId: '', //城市id
				hollId: '', //大厅id
				phone: '', //电话
				address: '' //地址
			}
		},
		onLoad() {
			this.getCity()
		},
		methods: {
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				// console.log(e);
				// // 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
				// 	// picker为选择器this实例，变化第二列对应的选项
					this.getHoll(e.index,e.value[0].id) //测试
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {  // 选择城市确认
				this.city = e.value[0].name +'/'+e.value[1].name;
				this.cityId = e.value[1].id;
				this.show = false;
				this.getAddress(e.value[1].id);
				this.holl = '';
				this.address = '';
				this.phone = '';
			},
			close() {
				this.show = false
			},
			confirm1(e) {
				this.holl = e.value[0].name;
				this.hollId =  e.value[0].id;
				this.address = e.value[0].address;
				this.phone = e.value[0].phone;
				this.show1 = false
			},

			//获取城市信息
			getCity() {
				let that = this;
				let sendData = {};
				that.apifun.unirequest(that.apifun.city, 'post', sendData, (res) => {
					// console.log(res)
					if (res.code === 1) {
						let datas = res.data;
						that.cityListzc = datas;
						let id = datas[0].id;
						that.getHoll(0,id);
					} else {
						that.apifun.toast(res.msg)
					}
				})
			},

			//获取一级大厅信息
			getHoll(index,id) {
				let that = this;
				var picker = this.$refs.uPicker
				let sendData = {
					city_id: id
				};
				that.apifun.unirequest(that.apifun.home, 'post', sendData, (res) => {
					if (res.code === 1) {
						let datas = res.data;
						if(index == 0){
							that.cityList = [that.cityListzc,datas];
						}
						picker.setColumnValues(1, res.data)
					} else {
						that.apifun.toast(res.msg)
					}
				})
			},
			//获取二级大厅信息
			getAddress(id) {
				let that = this;
				let sendData = {
					home_id: id
				};
				that.apifun.unirequest(that.apifun.hall, 'post', sendData, (res) => {
					console.log(res)
					if (res.code === 1) {
						let datas = res.data;
						that.holldata = [datas];
					} else {
						that.apifun.toast(res.msg)
					}
				})
			}
		}
	}

注意：

以上实例包含选中大厅后默认带出地址和电话，如不需要可以去掉

总结

以上就是今天要讲的内容啦，本文仅仅简单介绍了二级城市联动的使用，更多三级城市联动请参考其他大佬的详解哦~~~