Vue整合element-china-area-data实现PC端省市区三级联动选择器

时间:2021-08-09 01:09:59

大家好,我是小悟


1、前言

demo环境是SpringBoot+Vue+elementUI,开发工具是idea,有涉及到省市区三级联动选择器,网上查找了下,发现了这款和elementUI相匹配的element-china-area-data,这样的话样式什么的就不用担心会很丑,也不需要调,最主要是还可以直接获取到省市区编码,都不用通过后台接口转换。于是就撸起袖子,满心欢喜的整进来。效果如文末所示。


2、下载代码包

官网地址:https://www.npmjs.com/package/element-china-area-data

从官网上下载代码包放到项目中,可以把不需要的文件及文件夹删除,demo这边是没有删除。如下图所示:

Vue整合element-china-area-data实现PC端省市区三级联动选择器

Vue整合element-china-area-data实现PC端省市区三级联动选择器


3、安装china-area-data

在idea中打开终端工具,执行 npm install china-area-data 安装省市区数据,一会儿就好。如下图所示:

Vue整合element-china-area-data实现PC端省市区三级联动选择器


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"
                :optinotallow="areaOptions"
                v-model="selectedOptions"
                @change="areaHandleChange">
        </el-cascader>
    </div>
</div>


6、效果

Vue整合element-china-area-data实现PC端省市区三级联动选择器


您的一键三连,是我更新的最大动力,谢谢

山水有相逢,来日皆可期,谢谢阅读,我们再会

我手中的金箍棒,上能通天,下能探海