uniapp实现城市级联选择

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

页面布局：

<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]].dictNamelet 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.successUrlvar _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.resultif (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)})},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！