选择安装以下 china-division包，包含港澳台
https://github.com/pansyjs/china-division
在需要的vue文件中
import cascaderOptions, { DivisionUtil }from '@pansy/china-division';
const divisionUtil =new DivisionUtil(cascaderOptions);
// 返回省级别数据，只有value和label label是名字，value是code值
let provs=divisionUtil.getProvinces();
//给每个省份手动加入城市字段
provs.map(n=>{
let citys=divisionUtil.getChildrenByCode(n.value);
n.children=citys;
})
export default {
name:'',
data () {
return {
options:provs
}
},
methods:{
onChangeArea(value){ //选择省份和城市
console.log(value)
//value格式是 ["130000", "130100",]
}
}
<a-cascader :options="options" placeholder="请选择" @change="onChangeArea" />
====================================================================
第二种，用select组件，如何实现
export default {
name:'',
data () {
return {
provs:provs,
citys:[]
}
},
methods:{
onChangeProvi(value){
console.log(value);//格式是140000
let citys=divisionUtil.getChildrenByCode(value);
this.citys=citys; //给选中的省份，赋值citys
},
onChangeCity(value){ //选中城市
console.log(value);//格式是140300
}
}
}
<a-select default-value="请选择" style="width: 120px" @change="onChangeProvi">
<a-select-option :value="todo.value" v-for="todo in provs">
{{todo.label}}
</a-select-option>
</a-select>
<a-select default-value="请选择" style="width: 120px" @change="onChangeCity">
<a-select-option :value="todo.value" v-for="todo in citys">
{{todo.label}}
</a-select-option>
</a-select>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
获取第三层，区的数据时，用 let areas=divisionUtil.getChildrenByCode(value); 是获取不到的，应该是bug
但是 // 返回源数据divisionUtil.getSourceData(); 这个是正确的
所以，可以自己获取areas数据
let citys=[],areas=[];
let aa=sourceData.findIndex(n=>{
return n.value==theProCode; //保留之前选择的省份的code
})
citys=sourceData[aa].children;//获取选择的省份下的所有城市
let bb=citys.findIndex(m=>{
return m.value==theCityCode;//保留之前选择的城市的code
})
areas=citys[bb].children;//获取选择的城市下，所有的区
this.areas=areas;
