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

最新推荐文章于 2024-08-01 15:15:14 发布

紫菀檀ss

最新推荐文章于 2024-08-01 15:15:14 发布

阅读量4.4k

点赞数 8

分类专栏： vue js 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/LiaoFengJi/article/details/120861479

版权

本文分享了如何使用Vue.js结合Element UI或Vant框架，实现PC端和移动端的省市区级联选择功能。通过省份编码筛选城市，城市编码筛选区县，详细介绍了实现逻辑并提供了相关代码示例。

摘要由CSDN通过智能技术生成

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

一、效果图

PC端的效果图：

请添加图片描述

移动端的效果图：

请添加图片描述

二、实现逻辑

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

三、相关代码如下

	<!--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">
          <!-- :value="item.value+'|'+item.label" 如果想同时拿到编号和省份名称，这个value的赋值可以写成这样，然后通过|切割即可，不需要拿到两个的话就只用赋值一个-->
            <el-option v-for="item in provinceList" :label="item.label" :value="item.value+'|'+item.label"></el-option>
          </el-select>
        </el-form-item>