1.下载：npm install element-china-area-data -S
2.按需导入：import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
provinceAndCityData是省市二级联动数据（不带“全部”选项）
regionData是省市区三级联动数据（不带“全部”选项）
provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
regionDataPlus是省市区三级联动数据（带“全部”选项）
"全部"选项绑定的value是空字符串""
CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市
TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105
3.案例
<el-form-item label="交付地区" prop="province" :rules=" form.contractStatus == '1' ? rules.province : [{ required: false }] " >
<el-cascader clearable class="dialog_form_width" size="large" :options="regionOptions" v-model="selectedRegionOptions" @change="handleChangeRegion"> </el-cascader>
</el-form-item>
data() {
return {
regionOptions: regionData,
selectedRegionOptions: [],
form:{
province:"",
city:"",
area:""
}
};
},
methods: {
/** 获取省市区 */
handleChangeRegion() {
this.form.province = CodeToText[this.selectedRegionOptions[0]];
this.form.city = CodeToText[this.selectedRegionOptions[1]];
this.form.area = CodeToText[this.selectedRegionOptions[2]];
},
/** 修改按钮，回显省市区 */
handleUpdate() {
// this.selectedOptions.push(TextToCode[this.form.provinces].code,TextToCode[this.form.provinces][this.form.city].code)
this.selectedRegionOptions = [];
if (
this.form.province != "" &&
this.form.province != undefined &&
this.form.province != null
) {
this.selectedRegionOptions.push(
TextToCode[this.form.province].code,
TextToCode[this.form.province][this.form.city].code,
TextToCode[this.form.province][this.form.city][this.form.area].code
);
}
},
}
4.点击修改时，将省市传过来，通过TextToCode转成code，这样才会回显省市