大家好，我是小悟
1、前言
demo环境是SpringBoot+Vue+elementUI，开发工具是idea，有涉及到省市区三级联动选择器，网上查找了下，发现了这款和elementUI相匹配的element-china-area-data，这样的话样式什么的就不用担心会很丑，也不需要调，最主要是还可以直接获取到省市区编码，都不用通过后台接口转换。于是就撸起袖子，满心欢喜的整进来。效果如文末所示。
2、下载代码包
官网地址：https://www.npmjs.com/package/element-china-area-data
从官网上下载代码包放到项目中，可以把不需要的文件及文件夹删除，demo这边是没有删除。如下图所示：
image.png
image.png
3、安装china-area-data
在idea中打开终端工具，执行 npm install china-area-data 安装省市区数据，一会儿就好。如下图所示：
image.png
4、js代码
参考官方demo依葫芦画瓢，这里举的例子是不带“全部”选项的省市区三级联动
el:'#demo',
data:{
areaOptions: [],
selectedOptions: []
},
methods: {
add: function(){
vue.areaOptions = regionData;
},
update: function (event) {
var id = getSelectedRow();
if(id == null){
return ;
}
vue.areaOptions = regionData;
},
//表单区域值改变时触发
areaHandleChange (value) {
//这里可以把获取到的value值赋值给后台字段做存储使用
//value是数组，如 绑定值：[ "330000", "330100", "330106" ]
//只需要把区存到后台数据库即可，即取到value[2]即可，在数据回显时，便可以自动显示整个省市区
//非常方便简介
//CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市
//TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105
//想获取到省市区中文的话，就这样写：CodeToText[value[0]]+CodeToText[value[1]]+CodeToText[value[2]];
}
}
5、html代码
<div class="form-group">
<div class="col-sm-2 control-label">省市区三级联动</div>
<div class="col-sm-10">
<el-cascader
size="large"
:options="areaOptions"
v-model="selectedOptions"
@change="areaHandleChange">
</el-cascader>
</div>
</div>
6、效果
image.png
您的一键三连，是我更新的最大动力，谢谢
山水有相逢，来日皆可期，谢谢阅读，我们再会
我手中的金箍棒，上能通天，下能探海
