原始数据:
[
"id": 2,
"createTime": null,
"updateTime": null,
"citycode": null,
"adcode": "410000",
"cityName": "河南省",
"level": "province",
"center": "113.753094,34.767052",
"cityInitial": "H",
"highId": null,
"cityList": [
{
"id": 3,
"createTime": null,
"updateTime": null,
"citycode": "0379",
"adcode": "410300",
"cityName": "洛阳",
"level": "city",
"center": "112.453895,34.619702",
"cityInitial": "L",
"highId": 2,
"cityList": []
},
]
]
<u-picker :show="show" ref="uPicker" :columns="columns" @cancel="cancel" keyName="label" @confirm="confirm" @change="changeHandler"></u-picker>
地区数据改造
formatCity(val) {
let cityData = []
let provinceData = []
if (val.length > 0) {
val.forEach((province, index) => {
provinceData.push({
id: province.id,
label: province.cityName
})
cityData = []
province.cityList.forEach(
city=> {
cityData.push({
id: city.id,
label: city.cityName
})
}
)
this.cityDataSum[index] = cityData
})
}
console.log(this.cityDataSum)
const picker = this.$refs.uPicker
this.provinceDataSum = provinceData
picker.setColumnValues(0, provinceData)
picker.setColumnValues(1, this.cityDataSum[0])
},
根据数据滚动动态更新二级数据
changeHandler(e) {
console.log(e)
const {
columnIndex, // 列索引
index, // 每列滚动的index
} = e
const picker = this.$refs.uPicker
if (columnIndex == 0) {
picker.setColumnValues(1, this.cityDataSum[index])
}
this.formData['city'] = this.cityDataSum[index].label
},
bindClick(item) {
console.log(item)
if (item.type == 'select') {
this.show = true
}
},