vue 省市区 三级联动 element-china-area-data

1. 安装

npm install element-china-area-data -S
复制代码

2. 引入

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
复制代码

3. 备注

$项目中使用:element ui中多选框，加上汉字传输$

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>

//当多选框改变的时候给相应的参数赋值：ReMangement.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.当获取相应的值时候渲染相关选项：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);
  })
}
复制代码

$利用store封装可多选的省市区的选择（可用于兄弟间传值）<br> 正常封装利用下面传输数据$

// this.$store.commit('hopeAddrzaro',1); 设置选择的几个区域的数组为空数组
// this.$store.commit('hopeAddrzaro',2); 设置选择的几个区域的数组转为字符串
// this.$store.commit('sethopeAddr',pathLabellist); 逐个传入拼接空格之后的字符串
// 
// this.$store.commit('expectaddresszaro',1); 设置展示用的几个区域的数组为空数组
// this.$store.commit('expectaddresszaro',2); 设置选择的几个区域的数组转为字符串
// this.$store.commit('setexpectaddress',pathLabellist); 逐个传入拼接空格之后的字符串
// 
// this.$store.state.hopeAddr 后台传来的汉字版本的地区拼接字符串
// 获取所有要用到的
// this.$store.state.hopeAddr 发送,接收的参数
复制代码

$利用父子间传值封装可多选的省市区的选择（用于一个页面多个次此插件）$

子传父:
子:rem.$emit('hopename', rem.hopeAddr) hopeAddrchild:父级接受@名称、rem.hopeAddr:子级传输的变量名称
父: <chinaareadoubledheckd @hopename="hopeAddrchild" ></chinaareadoubledheckd>
hopename:子集传来的名称，
hopeAddrchild：自己的方法名称
父传子:
父: <chinaareadoubledheckd :name="hopeAddrpare"></chinaareadoubledheckd>
:name ：子集接收的名称
hopeAddrpare :父级传给子级的参数变量名称
复制代码

$封装后的ChinaAreaDoubledCheckdD使用方法$

1.引入
import chinaareadoubledcheckd from '../components/ChinaAreaDoubleCheckD'
2.companet组件名称声明
chinaareadoubledcheckd: chinaareadoubledcheckd,
3.html 组件引入
<chinaareadoubledcheckd @hopeAddrchild="hopeAddrchild" :hopeAddrpare="hopeAddrpare"></chinaareadoubledcheckd>
4.父传子方法
    hopeAddrchild(hopeAddr){
      debugger
      this.hopeAddr=hopeAddr;
    },
  //变量名称声明
            hopeAddr:[],
      	    hopeAddrpare:"",
复制代码