Requirements: Bring up the drop-down box at the location to select cascade cities
. Effect display:
Page Layout:
<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 definition:
data(){
return{
locationIndex: 0,
locationArr: [
[],
[],
[]
],
multiIndex: [0, 0, 0],
select: '',
}
}
Confirm the selection of provinces and cities:
// 省市区确认事件
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
}
},
By default, the selected address in the drop-down expansion is the address in the current city:
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)
})
},