地址级联选择器（element-china-area-data插件）

1.安装

npm install element-china-area-data -S

2.引入

import {regionData, CodeToText, TextToCode} from 'element-china-area-data';

3.使用

<el-cascader :options="areaSelectData" :change-on-select="true" :clearable="true" :filterable="true"
  @change="handleChange" class="full-width" size="medium" v-model="form.selectedOptions" />


data() {

　　areaSelectData: regionData, // options绑定的数据就是引入的 regionData

}

// 选择公司所在省、市、区
handleChange() {
// form.selectedOptions是地址数组，分别对应省市区，下面的操作是将数组转变为字符串保存，如果不需要以字符串形式保存，可以忽略
  this.form.province = this.form.selectedOptions[0];
  this.form.city = this.form.selectedOptions[1];
  this.form.area = this.form.selectedOptions[2];
  if (this.form.province !== undefined) {
    this.buildSurveyData.damRegisterOne.constructionPlace = CodeToText[this.form.province] + ' ';
  }
  if (this.form.city !== undefined) {
    this.buildSurveyData.damRegisterOne.constructionPlace += CodeToText[this.form.city] + ' ';
  }
  if (this.form.area !== undefined) {
    // 拼接公司详细地址
    this.buildSurveyData.damRegisterOne.constructionPlace += CodeToText[this.form.area] + ' ';
  }


// 由于上面将地址转为了字符串，所以在加载页面获取数据时，要重新将字符串转为数组。下面是对数据的处理

if(this.buildSurveyData.damRegisterOne.constructionPlace) {
  let address = this.buildSurveyData.damRegisterOne.constructionPlace.split(' ');
  // 省份
  this.form.selectedOptions.push(TextToCode[address[0]].code);
  // 城市
  let cityCode = TextToCode[address[0]][address[1]].code;
  this.form.selectedOptions.push(cityCode);
  // 地区
  let areaCode = TextToCode[address[0]][address[1]][address[2]].code;
  this.form.selectedOptions.push(areaCode);
}

 

转载于:https://www.cnblogs.com/xinci/p/10271686.html