1. The installation
npm install element-china-area-data -S
Copy the code
  1. The introduction of
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
Copy the code
  1. note


Used in the project : e l e m e n t u i In the multi – select box, plus Chinese character transmission Used in the project: Multi-select box in Element UI, plus Chinese character transfer 

import { provinceAndCityDataPlus,CodeToText,TextToCode} from 'element-china-area-data' areaOptions: provinceAndCityDataPlus, //html <el-cascader class="findsmellbox" :props="props" clearable ref="sellarea" style="width: 269px; margin-right: 30px" size="large" :options="areaOptions" v-model="datadialogsell.expectaddress" @change="meaddressfun" ></el-cascader> Vue --736 meAddressFun (arR) {let rem=this; if(arr.length>0){ rem.datadialogsell.hopeAddr=[]; arr.forEach(function(areaobj){ var pro=CodeToText[areaobj[0]]; var city=CodeToText[areaobj[1]]; var pathLabellist=pro+" "+city; rem.datadialogsell.hopeAddr.push(pathLabellist); }) rem.datadialogsell.hopeAddr=rem.datadialogsell.hopeAddr.join(","); }}, e. when obtain the corresponding value rendering options: ReMangement. Vue - 926 rem. Datadialogsell. Expectaddress = []; if(value.hopeAddr! =""){ value.hopeAddr.split(',').forEach(function(hopeobj){ var expectobj=[]; var hopeobjlist=hopeobj.split(' '); expectobj.push(TextToCode[hopeobjlist[0]].code); expectobj.push(TextToCode[hopeobjlist[0]][hopeobjlist[1]].code); rem.datadialogsell.expectaddress.push(expectobj); })}Copy the code


using s t o r e Encapsulate the selection of multiple provinces and cities (can be used to send values between brothers) < b r > Normal encapsulation uses the following data transfer Use store encapsulation to select multiple provinces (can be used to send values between brothers) < BR > Normal encapsulation uses the following data transfer 

// this.$store.commit('hopeAddrzaro',1); Use this. Codestore.com MIT ('hopeAddrzaro',2); New codestore.com MIT ('sethopeAddr',pathLabellist); Use // // this. codestore.com MIT (' Expectaddresszaro ',1); Use this. Codestore.com MIT (' Expectaddresszaro ',2); Set the selected several areas of the array to a string // this. codestore.com MIT (' setExpectaddress ',pathLabellist); // // this.$store.state.hopeAddr Specifies the parameters to send, receive, and hopeAddrCopy the code


Use parent-child transmission to encapsulate the selection of multiple provinces and cities (for multiple times on a page) Use parent-child transmission to encapsulate the selection of multiple provinces and cities (for multiple times on a page) 

$emit('hopename', rem.hopeaddr) hopeAddrchild: parent accepts @name, rem.hopeaddr: parent of variable name transmitted by child: <chinaareadoubledheckd @hopename="hopeAddrchild" ></ Chinaareadoubledheckd > Hopename ="hopeAddrchild" > Parent: <chinaareadoubledheckd :name="hopeAddrpare"></ ChinaAreadoubledheckd > :name :name received by the subset hopeAddrpare: parameter variable name passed from parent to childCopy the code


After the encapsulation C h i n a A r e a D o u b l e d C h e c k d D Method of use Encapsulated ChinaAreaDoubledCheckdD usage method 

Import chinaareadoubledCheckd from '.. / components/ChinaAreaDoubleCheckD '2. com panet chinaareadoubledcheckd component name statement: chinaareadoubledcheckd, < ChinaAreadoubledCheckd @hopeaddrChild ="hopeAddrchild" :hopeAddrpare="hopeAddrpare"></chinaareadoubledcheckd> 4. HopeAddrchild (hopeAddr){debug this. HopeAddr =hopeAddr; // hopeAddr:[], hopeAddrpare:"",Copy the code