選擇安裝以下?china-division包吁津，包含港澳臺(tái)
https://github.com/pansyjs/china-division
在需要的vue文件中
import cascaderOptions, { DivisionUtil }from '@pansy/china-division';
const divisionUtil =new DivisionUtil(cascaderOptions);
// 返回省級(jí)別數(shù)據(jù)，只有value和label? label是名字梧税，value是code值
let provs=divisionUtil.getProvinces();
//給每個(gè)省份手動(dòng)加入城市字段
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="請(qǐng)選擇" @change="onChangeArea" />
====================================================================
第二種，用select組件序六，如何實(shí)現(xiàn)
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="請(qǐng)選擇" 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="請(qǐng)選擇" style="width: 120px" @change="onChangeCity">
<a-select-option :value="todo.value"? v-for="todo in citys">
{{todo.label}}
</a-select-option>
</a-select>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
獲取第三層立宜，區(qū)的數(shù)據(jù)時(shí)，用 let areas=divisionUtil.getChildrenByCode(value);? 是獲取不到的萎河，應(yīng)該是bug
但是? // 返回源數(shù)據(jù)divisionUtil.getSourceData();? 這個(gè)是正確的
所以荔泳，可以自己獲取areas數(shù)據(jù)
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;//獲取選擇的城市下，所有的區(qū)
this.areas=areas;
