本文参考:element-china-area-data - npm
本文参考:http://t.csdnimg.cn/LL6Ax
1、安装组件依赖(默认是6.1.0版本,如果需要稳定下载5.02)
npm install element-china-area-data -S
npm install element-china-area-data@5.0.2 -S
2.使用 (以下使用6版本,直接选择纯中文的,若使用地域代码options:regionData)
注意:如果使用5.0.2版本 需要使用CodeToText 大写!!
import {
regionData, // 省市区三级联动数据
codeToText, // 这是6.1.0版本 5.0.2稳定版是CodeToText 小写的注意!
pcaTextArr, // 省市区联动数据,纯汉字
TextToCode, // 5.0.2可以使用 TextToCode['北京']
} from "element-china-area-data";
3、使用el-cascader标签
<el-cascader
style="width: 100%"
:options="options"
v-model="selectedOptions"
@change="addressChoose"
></el-cascader>
4、data中定义元素
data(){
return{
options: pcaTextArr, // 省市区级联数据
selectedOptions: [], // 选择的地区
}
}
5、触发事件的函数方法
/**省市区三级联动 */
addressChoose(value) {
console.log("##selectedOptions", value);
this.form.purchaserArea = value[0] + "/" + value[1] + "/" + value[2];
// 使用区域代码的时候
// console.log(
// "省市区:",
// codeToText[value[0]],
// codeToText[value[1]],
// codeToText[value[2]]
// );
},