微信小程序 uni-app Uview 三级联动选择器

微信小程序 uni-app Uview 三级联动选择器

样式展示：

说明

三级联动选择器，第三列肯定是三维数组，第二列是二维数组，最后拿值根据第一二三列的index拿：this.model1.houseGuid = this.typeData3[e.indexs[0]][e.indexs[1]][e.indexs[2]]；格式不能乱，没子数据的要存个空数组

代码

<u-picker :show="showType" show-toolbar title="请选择" ref="uPicker" v-model="model1.typeValue"
:columns="typeData" keyName="label" @confirm="onConfirmType" @close="showType = false"
@cancel="showType = false" @change="changeHandler" ></u-picker>
							  
							  
							  
							  
							  
getType() {
	if(!this.model1.regionNo){
		uni.showModal({
			title: '友情提示',
			content: "请先选择小区",
			showCancel: false,
			success(res) {
				callback && callback()
			}
		})
	}else{
		this.showType = true
		queryAddressTypeList({
			regionNo: this.model1.regionNo
		}).then(response => {
		//给选择器赋值   typeData3存的是确认后往后台传的id, typeData1、typeData2存的是选择器上显示的名称
			if ((response.data.code == 1 && JSON.stringify(response.data.data) != '{}')) {
				this.typeData = [
					[],
					[],
					[]
				]
				this.typeData1 = []
				this.typeData2 = []
				this.typeData3 = []
				response.data.data.forEach((item, index) => {
					this.typeData[0].push(item.name)
					if(index == 0 && item && item.children){
						item.children.forEach((item1,index1) => {
							this.typeData[1].push((item1.name))
							if(index1 == 0){
								item1.children.forEach((item2,index2) => {
									this.typeData[2].push((item2.name))
								})

							}
						})
					}
			if(item && item.children){
				let typeData1 = [];
				let typeData22 = []
				let typeData33 = []
				item.children.forEach((item2,index2)=>{
					typeData1.push((item2.name))
					if(item2 && item2.children){
						let typeData2 = []
						let typeData3 = []
						item2.children.forEach((item3,index3) =>{
							typeData2.push(item3.name)
							typeData3.push(item3.id)
						})
						typeData22.push(typeData2)
						typeData33.push(typeData3)
					}
				})
				this.typeData1.push(typeData1)
				this.typeData2.push(typeData22)
				this.typeData3.push(typeData33)
			}
				})
			}
		})
	}
},							  
changeHandler(e) {
	const {
		columnIndex,
		value,
		values, // values为当前变化列的数组内容
		index,
		indexs,
		// 微信小程序无法将picker实例传出来，只能通过ref操作
		picker = this.$refs.uPicker
	} = e
	// 当第一列值发生变化时，变化第二列(后一列)对应的选项
	if (columnIndex === 0) {
		// picker为选择器this实例，变化第二列对应的选项
		picker.setColumnValues(1, this.typeData1[index])
		if(this.typeData2[indexs[0]][indexs[1]]){
			picker.setColumnValues(2, this.typeData2[indexs[0]][indexs[1]])
		}else{
			picker.setColumnValues(2, [])
		}
	}
	if (columnIndex === 1) {
		// picker为选择器this实例，变化第二列对应的选项
		if(this.typeData2[indexs[0]][indexs[1]]){
			picker.setColumnValues(2, this.typeData2[indexs[0]][indexs[1]])
		}else{
			picker.setColumnValues(2, [])
		}
	}
},
// 回调参数
onConfirmType(e) {
	if(e.value[1] && e.value[2]){
		this.showType = false
		this.model1.typeValue = e.value.toString().replaceAll(",", ">")
		this.model1.houseGuid = this.typeData3[e.indexs[0]][e.indexs[1]][e.indexs[2]]
	}else{
		uni.showModal({
			title: '友情提示',
			content: "请选择到最后一级",
			showCancel: false,
			success(res) {
				callback && callback()
			}
		})
	}

},

后台查询接口返回数据格式：

注意：如果某A的children下没数据，后台返回格式要返回个空Array;如果返回的是空，那就需要在前台处理，在往选择器上赋数据时如果此children为空则存个空数组，不然会报错而且不容易发现

typeData,typeData1,typeData2数据样式：