1、安裝元件依賴
npm install element-china-area-data -S
2、目标頁面中引入
import {
provinceAndCityData,
regionData,
provinceAndCityDataPlus,
regionDataPlus,
CodeToText,
TextToCode
} from "element-china-area-data";
3、使用el-cascader标簽
<div style="width:460px;">
<el-cascader style="width:100%;" :options="options"
v-model="selectedOptions" @change="addressChoose"></el-cascader>
</div>
4、data中定義元素
data(){
return{
// 省市區級聯
options: regionDataPlus,
selectedOptions: [],
}
}
5、觸發事件的函數方法
/**省市區三級關聯 */
addressChoose(value) {
console.log(
"省市區:",
CodeToText[value[0]],
CodeToText[value[1]],
CodeToText[value[2]]
);
this.form.province = CodeToText[value[0]];
this.form.city = CodeToText[value[1]];
this.form.area = CodeToText[value[2]];
},
6、資料回顯
// 省市區轉換
let province = this.form.province;
let city = this.form.city;
let area = this.form.area;
let arg1 = TextToCode[province].code;
let arg2 = TextToCode[province][city].code;
let arg3 = TextToCode[province][city][area].code;
this.selectedOptions.push(arg1, arg2, arg3);