uniapp使用picker做省市区联动
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uniapp使用picker做省市区联动相关的知识,希望对你有一定的参考价值。
参考技术A 此方法是使用于省市区接口需要id调用获取地区,不适用一次调用将所有地区数据返回来再做处理。vue mint-ui 实现省市区街道4级联动(仿淘宝京东收货地址4级联动)
先去下载一个“省份、城市、区县、乡镇” 四级联动数据,然后
引入
import { Picker } from ‘mint-ui‘; //前提是npm install mint-ui -S Vue.component(Picker.name, Picker);
组件使用
<mt-picker :slots="addressSlots" class="picker" @change="onAddressChange" :visible-item-count="5" ></mt-picker > <mt-picker :slots="streetSlots" ref="picker" class="picker" @change="onStreetChange" :visible-item-count="5" ></mt-picker > 上门服务地址:{{ addressProvince }} {{ addressCity }}
组件方法
<script type="text/ecmascript-6" > import s from ‘../../statics/mobile/json/address4.json‘ export default { name: ‘address‘, data () { return { companyName:‘‘, addressSlots: [ { flex: 1, defaultIndex: 1, values: Object.keys(s), className: ‘slot1‘, textAlign: ‘center‘ }, { divider: true, content: ‘-‘, className: ‘slot2‘ }, { flex: 1, values: [], className: ‘slot3‘, textAlign: ‘center‘ }, { divider: true, content: ‘-‘, className: ‘slot4‘ }, { flex: 1, values: [], className: ‘slot5‘, textAlign: ‘center‘ } ], streetSlots: [ { flex: 1, values: [], className: ‘slot1‘, textAlign: ‘center‘ } ], addressProvince: ‘省‘, addressCity: ‘市‘, addressXian: ‘区‘, addressStreet: ‘街道‘, } }, methods: { onAddressChange(picker, values) { let sheng = Object.keys(s); let shi = Object.keys(s[values[0]]); let xian = s[values[0]][shi[0]]; this.xianObj = xian; picker.setSlotValues(1, shi); this.addressProvince = values[0]; this.addressCity = values[1]; this.addressXian = values[2]; picker.setSlotValues(2, Object.keys(xian)); }, onStreetChange(picker, values){ this.addressStreet = values[0] }, }, watch: { ‘addressXian‘: { handler(val, oval){ let street = this.xianObj[this.addressXian] this.streetSlots[0].values = street } } }, created(){ }, mounted(){ this.$nextTick(() => { setInterval(() => {//这个是一个初始化默认值的一个技巧 this.addressSlots[0].defaultIndex = 0; }, 1000); }); } } </script >
完成效果
以上是关于uniapp使用picker做省市区联动的主要内容,如果未能解决你的问题,请参考以下文章
省市区三级联动jquery插件 city-picker与百度地图API联动小案例
记录 vant Picker 选择器,实现三级联动,传对应省市区code值