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

原创

悟空码字

修改于 2021-03-24 18:02:48

5.1K0

修改于 2021-03-24 18:02:48

1、前言

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

2、下载代码包

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

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

3、安装china-area-data

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

4、js代码

参考官方demo依葫芦画瓢，这里举的例子是不带“全部”选项的省市区三级联动

var vue = new Vue({
  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代码

<script src="${request.contextPath}/statics/plugins/element-china-area-data/dist/app.js"></script>

<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、效果