<mt-popup v-model="popupVisible" position="bottom">
<div class="pop-btn">
<p @click="cancel()">取消</p>
<p @click="save()">确定</p>
</div>
<mt-picker :slots="slots" value-key="name" @change="changeCity"></mt-picker>
</mt-popup>
new Vue({
data(){
return(){
slots: [
{
flex: 1,
defaultIndex: 1,
values: [], //省份数组
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'
}
],
popupVisible:false,//是否显示popup弹出层
}
}
methods:{
//城市的picker改变时调用
changeCity(picker, values) {
if (values[0]) {
picker.setSlotValues(1, Object.keys(this.pca[values[0]]));//只要有一级数据就绑二级数据
picker.setSlotValues(2, this.pca[values[0]][values[1]]);//只要有二级数据就帮三级数据
this.selectAddress = values;
}
},
//获取城市数据
_getCityData() {
$.ajax({
url: '/static/json/pca.json',
type: 'get',
success: function (res) {
vm.pca = res;
vm.slots[0].values = Object.keys(res);//绑定一级数据
}
});
}
},
mounted() {
this._getCityData();
}
}) 城市数据地址 github：https://github.com/artiely/Administrative-divisions-of-China
城市数据地址 码云：https://gitee.com/yagerya/Administrative-divisions-of-China