uniapp 搭配uviwe u-picker 实现地区联栋
原始数据:
["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.uPickerthis.provinceDataSum = provinceDatapicker.setColumnValues(0, provinceData)picker.setColumnValues(1, this.cityDataSum[0])},
根据数据滚动动态更新二级数据
changeHandler(e) {console.log(e)const {columnIndex, // 列索引index, // 每列滚动的index} = econst picker = this.$refs.uPickerif (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}},