版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_31490071/article/details/87461288
实现效果：
首先说一下实现思路：
1.采用单独的js文件存储省市区数据，可以是json或者js文件，数据可参考我的上一篇博客。
2.使用mt-picker进行赋值，(需要提前引入mint-ui)根据省的数据的改变，动态的改变市和区的显示数据。
3.最好采用单独的组件实现，方便修改和复用。
代码：
<template>
<div class="location_container">
<mt-picker :slots="myAddressSlots" @change="onAddressChange"></mt-picker>
</div>
</template>
<script>
import {city, privinceList, cityList, districtList} from '../../assets/province_data'
//引入省市区数据,数据内容在上一条博客中
export default {
name: "LocationPicker",
data() {
return {
myprivinceList: [], //省的数组
mycityList: [], //省对应城市的数组
mydistrictList:[], //区或者县的数组
areapicker:'',
myAddressSlots: [
{
flex: 1,
defaultIndex: 0,
values:privinceList, //省份数组
className: 'slot1',
textAlign: 'center'
},
{
pider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
defaultIndex: 0,
values: cityList,
className: 'slot3',
textAlign: 'center'
},
{
pider: true,
content: '-',
className: 'slot4'
},
{
flex: 1,
defaultIndex: 0,
values:districtList,
className: 'slot5',
textAlign: 'center'
}
],
myAddressPrivince:'', //最后选中的省或直辖市
myAddressCity:'', //最后选中的城市
myAddressDistrict:'', //最后选中的区或者县
}
},
watch:{
myAddressPrivince(oldval,newval){ //省数据变化后，更新市的显示数据
this.areapicker.setSlotValues(2,this.mycityList);
this.areapicker.setSlotValue(2, this.mycityList[0]);
console.log('选中的省是'+this.myAddressPrivince);
},
myAddressCity(oldval,newval){ //城市的值改变后，重置区县的数据
this.areapicker.setSlotValues(4,this.mydistrictList);
this.areapicker.setSlotValue(4,this.mydistrictList[0]);
console.log('选中的市是'+this.myAddressCity);
},
myAddressDistrict(oldval,newval){
console.log('选中的区是'+this.myAddressDistrict);
}
},
methods: {
onAddressChange:function(picker, values){
this.areapicker = picker;
this.mycityList = [];
this.mydistrictList = [];
var chooseList = city.filter(function(item){
return item.name == values[0];
});
if(chooseList[0].sub){
for(var item of chooseList[0].sub){
this.mycityList.push(item.name);
}
//获取非直辖市数据
if(chooseList[0].sub.length>1){
var choosedisList=[];
if(this.mycityList.indexOf(values[2])>-1 && values[2]!= '其他'){
choosedisList = chooseList[0].sub.filter(function(item){
return item.name == values[2];
});
for(var item of choosedisList[0].sub){
this.mydistrictList.push(item.name);
}
}else{
this.mydistrictList=[];
}
}
//获取直辖市数据
else{
for(var item of chooseList[0].sub[0].sub){
this.mydistrictList.push(item.name);
}
}
}
this.myAddressPrivince = values[0];
this.myAddressCity = values[2];
this.myAddressDistrict = values[4];
}
},
mounted() {
this.$nextTick(() => { //vue里面全部加载好了再执行的函数 （类似于setTimeout）
this.myAddressSlots[0].defaultIndex = 0
});
}
}
</script>
<style scoped>
.location_container{
width:100%;
height:353px;
position:absolute;
bottom:0px;
background: #FFFFFF;
box-shadow: 0 3px 10px 0 rgba(27,27,78,0.08);
border-radius: 10px 10px 0px 0px;
}
</style>
遇到的问题：
A.当选择区县这一栏时，选择最后一个选项，再重新选择市或者省，则区这一栏数据无法刷新显示，有时候刷新后，区这一栏的数据为未选中。
B.当选择市这一栏最后一个选项后，重新选择省，市这一栏数据无法刷新。
原因我还没有完全弄清，先说解决方法：
监听省市区的数据变化，然后强制对某一栏选中数据进行重定位。
关键代码如下：
watch:{
myAddressPrivince(oldval,newval){ //省数据变化后，更新市的显示数据
this.areapicker.setSlotValues(2,this.mycityList);
this.areapicker.setSlotValue(2, this.mycityList[0]); //省的数据变化后，强制将市这一栏的数据定位到第一个
console.log('选中的省是'+this.myAddressPrivince);
},
myAddressCity(oldval,newval){ //城市的值改变后，重置区县的数据
this.areapicker.setSlotValues(4,this.mydistrictList);
this.areapicker.setSlotValue(4,this.mydistrictList[0]); //市的数据变化后，强制将区这一栏的数据定位到第一个
console.log('选中的市是'+this.myAddressCity);
},
myAddressDistrict(oldval,newval){
console.log('选中的区是'+this.myAddressDistrict);
}
}