vue-elementui省市区三级选择器_vue h5 省市区多选js

1.vue使用elementui的el-cascader

1.导入element-china-area-data

npm install element-china-area-data -S
1

2.页面引入

regionData 是省市区三级联动数据（不带“全部”选项）

CodeToText 是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市

在 https://www.npmjs.com/package/element-china-area-data 有完整的各种对象，我这个只用到2个，想用其他的可自行去查找

3.页面使用

  <el-cascader
          :options="areaSelectData"
          @change="handleChange"
          class="full-width"
          size="large"
          v-model="selectedOptions"
          placeholder="请选择您所在的城市"
        />
1
2
3
4
5
6
7
8

其中的selectedOptions绑定的是区域码

4.js部分

handleChange(value) {
   console.log(value)
   var provinceCode = CodeToText[value[0]];
   var cityCode = CodeToText[value[1]];
   var orgion = CodeToText[value[2]];
   console.log(provinceCode)
   console.log(cityCode)
   console.log(orgion)
   this.selectedOptions = [value[0] , value[1], value[2]]
   this.form1.HomeAddress = provinceCode + cityCode + orgion
 },
1
2
3
4
5
6
7
8
9
10
11

传进来的value是code数组

将数组给到selectedOptions 就可以在页面上显示选择

使用CodeToText就可以将数字变为各个地区

效果图