vue - 实现省市区的级联选择

  最近要实现一个省市区级联选择效果，省市区的数据都是使用的本地数据，实现起来逻辑会有一点复杂，我在这里列举PC端的总结分享一下，移动端的代码也是差不多的，除了html之外，其它的可以复制根据需求使用即可。希望对大家有所帮助。

一、效果图

  PC端的效果图：

  移动端的效果图：

二、实现逻辑

  我这里的实现逻辑是先通过省份来获取城市，然后通过城市来获取区县，街道因为不是固定的，所以让用户自己输入。获取对应市区的逻辑是：每个省份、城市、区县都有唯一的编码，然后省份编码的前两位跟城市是一样的，通过截取的方式来筛选出城市，然后城市的前四位编码跟区县的是一样的，也同样通过截取的方式来筛选出区县即可。
  因为pc端我是使用了element-ui框架的select组件来实现的，所以省市区的数据结构（可以点击下载）是这样的：

  移动端是使用了vant框架的van-picker组件实现的，数据结构跟PC端的会有所不同，所以省市区的数据结构（可以点击下载）是这样的：

三、相关代码如下

	
	<el-form :inline="true" :model="addressForm">
        <el-form-item label="省" label-width="100px" prop="province">
          <el-select v-model="addressForm.province" placeholder="请选择" style="width:250px" @change="bindProvinceChange">
          
            <el-option v-for="item in provinceList" :label="item.label" :value="item.value+'|'+item.label">el-option>
          el-select>
        el-form-item>