本文介绍了vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
先去下载一个“省份、城市、区县、乡镇” 四级联动数据，然后
引入
组件使用
<mt-picker :slots="streetSlots" ref="picker" class="picker" @change="onStreetChange" :visible-item-count="5" >
上门服务地址:{{ addressProvince }} {{ addressCity }}
组件方法
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',className: 'slot4'
},className: 'slot5',textAlign: 'center'
}
],streetSlots: [
{
flex: 1,addressProvince: '省',addressCity: '市',addressXian: '区',addressStreet: '街道',}
},methods: {
onAddressChange(picker,values) {
let sheng = Object.keys(s);
let shi = Object.keys(s[values[0]]);
let index=shi.indexOf(values[1])
let xian = s[values[0]][shi[index]];
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(() => {
setTimeout(() => {//这个是一个初始化默认值的一个技巧
this.addressSlots[0].defaultIndex = 0;
},100);
});
}
}
完成效果
