1.vue使用elementui的el-cascader
1.导入element-china-area-data
npm install element-china-area-data -S
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="请选择您所在的城市"
/>
其中的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
},
传进来的value是code数组
将数组给到selectedOptions 就可以在页面上显示选择
使用CodeToText就可以将数字变为各个地区
效果图