Element UI 省市区数据联动|area|element|value|字节|省市区

1、安装组件依赖

npm install element-china-area-data -S

2、目标页面中引入

import {
provinceAndCityData,
regionData,
provinceAndCityDataPlus,
regionDataPlus,
CodeToText,
TextToCode
} from "element-china-area-data";

3、使用el-cascader标签

v-model="selectedOptions" @change="addressChoose">

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);

按照步骤，直接C+V复制到项目中，就可以运行实现图中效果。也可以从开源字节的代码仓库fork租房源码。