需求:所在地调起下拉框进行城市的级联选择
效果展示:
效果展示

页面布局:

<view class="LocationProblem">
	<text class="left_title">问题所在地:</text>
	<picker class="pickerList" mode="multiSelector" :range="locationArr" :value="multiIndex"
		@change="pickerChange" @columnchange="pickerColumnchange">
		<view class="right_input" @click="goToProblemLocation()">
			<textarea v-model="select" placeholder="请选择问题所在地 >" border='none' class="location-input" autoHeight />
			</textarea>
		</view>
	</picker>
</view>

data数据定义:

data(){
	return{
		locationIndex: 0,
		locationArr: [
			[],
			[],
			[]
		],
		multiIndex: [0, 0, 0],
		select: '',
	}
}

省市区的选择确认:

// 省市区确认事件
pickerChange(e) {
	var _this = this
	_this.multiIndex = e.detail.value
	// 获取省市区总数据

	let firstCity = this.oldpProvinceDataList[_this.multiIndex[0]].dictName
	let selectName = ''
	if (_this.locationArr[0][_this.multiIndex[0]] == firstCity) {
		selectName = this.oldpProvinceDataList[_this.multiIndex[0]].dictCode
	}
	let secondCity = this.oldpProvinceDataList[_this.multiIndex[0]].children[_this.multiIndex[1]]

	if (_this.locationArr[1][_this.multiIndex[1]] == secondCity.dictName) {
		selectName += '/' + secondCity.dictCode
	}

	let thirdCity = this.oldpProvinceDataList[_this.multiIndex[0]].children[_this.multiIndex[1]].children[_this
		.multiIndex[2]]
	if (_this.locationArr[2][_this.multiIndex[2]] == thirdCity.dictName) {
		selectName += '/' + thirdCity.dictCode
	}

	_this.select =
		_this.locationArr[0][_this.multiIndex[0]] + "," +
		_this.locationArr[1][_this.multiIndex[1]] + "," +
		_this.locationArr[2][_this.multiIndex[2]]
	_this.locationPro = selectName
	_this.proDetail.region = _this.locationPro
},
// 每列滑动的监听
pickerColumnchange(e) {
	// this.moveTypes = 'bottom'
	// this.type = 'suuccess'
	// this.msg = '成功!'
	// this.imgUrl = this.successUrl
	var _this = this
	// 第几列滑动
	console.log("第几列滑动 = " + JSON.stringify(e.detail.column))
	// 第几列滑动选中的下标
	console.log("第几列滑动选中的下标 = " + JSON.stringify(e.detail.value))
	// 第一列滑动
	if (e.detail.column === 0) {
		_this.multiIndex[0] = e.detail.value
		// 第二列更新相应的数据
		_this.locationArr[1] = _this.oldpProvinceDataList[_this.multiIndex[0]].children.map((item,
			index) => {
			return item.dictName
		})
		if (_this.oldpProvinceDataList[_this.multiIndex[0]].children.length === 1) {
			_this.locationArr[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].children[0].children
				.map((
					item,
					index) => {
					return item.dictName
				})
		} else {
			_this.locationArr[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].children[_this
				.multiIndex[
					1]].children.map((item, index) => {
				return item.dictName
			})
		}
		// 第一列滑动  第二列 和第三列 都变为第一个
		_this.multiIndex.splice(1, 1, 0)
		_this.multiIndex.splice(2, 1, 0)
	}
	// // 第二列滑动
	if (e.detail.column === 1) {
		_this.multiIndex[1] = e.detail.value
		_this.locationArr[2] = _this.oldpProvinceDataList[_this.multiIndex[0]].children[_this
			.multiIndex[
				1]].children.map((item, index) => {
			return item.dictName
		})
		// 	// 第二列 滑动 第三列 变成第一个
		_this.multiIndex.splice(2, 1, 0)
	}
	// 第三列滑动
	if (e.detail.column === 2) {
		_this.multiIndex[2] = e.detail.value
	}
},

默认下拉展开所选中地址为当前所在城市的地址:

getLocation() {
	let params = 'originCode=ADMINISTRATIVE_REGION&dictLevel=0'
	loadTreeDataSelect({}, params).then(res => {
		this.oldpProvinceDataList = res.result
		if (res.success) {
			for (var i = 0; i < res.result.length; i++) {
				this.locationArr[0].push(res.result[i].dictName)
				for (var j = 0; j < res.result[i].children.length; j++) {
					this.locationArr[1].push(res.result[i].children[j].dictName)
					if (res.result[i].children[j].children) {
						for (var h = 0; h < res.result[i].children[j].children.length; h++) {
							this.locationArr[2].push(res.result[i].children[j].children[h].dictName)
						}
					}
				}
			}
		}
		let _this = this
		_this.multiIndex[0] = 0
		_this.locationArr[1] = _this.oldpProvinceDataList[0].children.map((item,
			index) => {
			return item.dictName
		})
		if (_this.oldpProvinceDataList[0].children.length === 1) {
			_this.locationArr[2] = _this.oldpProvinceDataList[0].children[0].children
				.map((
					item,
					index) => {
					return item.dictName
				})
		} else {
			_this.locationArr[2] = _this.oldpProvinceDataList[0].children[_this
				.multiIndex[
					1]].children.map((item, index) => {
				return item.dictName
			})
		}
		// 第一列 第二列 和第三列 都变为第一个
		_this.multiIndex.splice(0, 1, 0)
		_this.multiIndex.splice(1, 1, 0)
		_this.multiIndex.splice(2, 1, 0)
	})
	},
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐