vue2 - elementUI全国城市列表选择器组件，提供省市区联动选择器、选择地址省市区级联、复选框tree树状省份全部列出来勾选，支持数据懒加载节点动态加载（附带全国省市区县乡镇村json数据）

已于 2025-01-16 15:32:33 修改
阅读量4.3k 收藏 6
点赞数 7
分类专栏： 前端组件与功能(开箱即用) Vue组件与功能(工作经验) 文章标签： elementui vue.js 省市区选择器 城市省份和市区级联选择器 树形tree省市区多级联动勾选 利用tree组件显示全国省份 vue城市位置选择器插件
于 2024-09-22 23:43:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_50545213/article/details/142445895
版权

效果图

vue2+element ui最新实现全国省市区联动级联选择器大全，提供el-tree树形省市区选择器、el-select省市区选择器、el-cascader级联省市区选择器，vue2选择省份/市区/区县/乡镇/街道功能插件，以树状复选框结构将全国省份名称都列出来让用户选择，支持每级懒加载请求数据、接口加载下级数据（等选择到某项时联动下一项）、动态数据结构，附带最新全国省市区JSON数据可供下载本地测试或直接正常使用，超详细示例代码复制运行。

在这里插入图片描述

示例一

全部代码如下。

了解本专栏 订阅专栏 解锁全文
Element-ui + Vue 省市区街道/镇四级联动组件
weixin_41346436的博客
08-12 5613
Element-ui + Vue 省市区街道/镇四级联动组件 由于全国范围内的省市区四级联动数组十几万个，JS数组相当庞大，因此我讲代码文件以网盘的形式分享 分享链接：https://pan.baidu.com/s/1vhwlacv6YyAstsYSGJS0ig 密码：6zsg 效果截图 部分代码预览 ...
Vue2 实现新增寄件人功能：弹框选择 + 表单校验 手把手教你用 Vue2 开发动态表单功能（附省市区选择器） Vue2 项目实战：省市区选择器与表单交互实现 从零开始用 Vue2 构建寄件人新增页
南北极之间
11-23 580
Vue2 实现新增寄件人功能：弹框选择 + 表单校验 手把手教你用 Vue2 开发动态表单功能（附省市区选择器） Vue2 项目实战：省市区选择器与表单交互实现 从零开始用 Vue2 构建寄件人新增页Vue2 实现新增寄件人功能：弹框选择 + 表单校验 手把手教你用 Vue2 开发动态表单功能（附省市区选择器） Vue2 项目实战：省市区选择器与表单交互实现 从零开始用 Vue2 构建寄件人新增页Vue2 实现新增寄件人功能：弹框选择 + 表单校验 手把手教你用 Vue2 开发动态表单功能（附省市区选择器）
VUE2,基于 el-tree 组件基础上封装的 省市区/县 选择器
qq_41775006的博客
09-21 2742
vue2,在 el-tree 组件基础上封装的 省市区/县 选择组件。
vue2使用element-china-area-data实现省市区联动选择使用Element UI 中国省市区级联数据
最新发布
2303_76675983的博客
04-03 614
第一步安装库 element-china-area-data。需求，二级联动，只显示省和市。结构参数不是自定义的。
Vue2+element 地区选择器组件
weixin_43886900的博客
11-27 1022
【代码】Vue2+element 地区选择器组件。
使用vue3+elementplus的级联选择器实现省市区联动（三级到五级）
qq_52696618的博客
04-29 3025
中华人民共和国行政区划（五级）：省级、地级、县级、乡级和村级。来自中华人民共和国民政部，用于查询中国省，市和区数据的网站。
element + vue3，级联选择器实现省市区
irisMoon06的博客
11-20 1531
由于es6支持哈希，所以数据量只要不太大，就不需要对el-cascader进行点击后在调接口出现下一级，很简单的就是直接获取所有数据。
vue3+ts封装chooseCity城市选择器
mkbird的博客
08-26 1938
先上效果图样式采用elementplus，各个组件详情查看elementplus官网整体采用popover作弹出框，需要注意的是elementplus，使用插槽的方式，标题一个在popover里的reference具名插槽，插槽内部我们添加标题和下拉图标下拉图标采用arrowdown（该图标为elementplus图标库封装后的，自己的项目请按照elementplus官网的用法）,class通过visible控制样式，如果弹出框可见，代表此时已经下拉，将下拉箭头改为上拉。......
vue3中使用element-plus的级联选择器动态加载中国省市区多选并回显
ming的博客
12-18 554
如果提交给后端的数据需要使用@change 进行处理，那最好不要使用 v-model直接对原数据进行绑定，要不然会有bug
vue3 + element plus 省市区
娄小研的博客
08-02 343
【代码】vue3 + element plus 省市区。
基于vue3.2的element-plus省市区选择器
m0_60459392的博客
11-01 3878
下载安装命令 npm i elui-china-area-dht。leave 数据可选层级，3代表省市区三级级联选项。基于vue3.2的element-plus省市区选择器。
CitySelector:基于vue的移动端城市选择组件
05-13
CitySelector 基于vue的移动端城市选择组件 手机扫这里看demo 针对移动端的城市选择组件 可以使用拼音或关键字进行检索，也可以在右侧检索栏快速滑动 本地构建方法：clone后npm install->npm run dev 欢迎大家提issues呀 如有需要可e-mail: 版本管理 pub+数字 6.1 去掉了rem，改为px， 分支pub1 tips: master分支在开发，需要clone的话找pub版本
vue实现城市列表选择功能
10-18
主要介绍了vue实现城市列表选择功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
【Vue3】vue3 + ts 封装城市选择组件
一个前端开发者
02-28 8536
城市数据并不是直接从接口服务器中获取的，而是从阿里云服务器上获取的数据，所以不能使用封装好的request发送请求，直接使用。注意：完整地址需要父组件传递给子组件，将来如果登录的用户，父组件可以获取到完整的地址。能够封装城市选择组件，并且完成基础的显示隐藏的交互功能。（3）子组件选择完城市，需要将数据传递给父组件。（1）父组件将城市数据传递给子组件。（2）子组件接收，并且进行展示。（4）点击弹层外部，关闭弹层。（4）点击弹层外部，关闭弹层。（4）父组件接受数据并且处理。（4）父组件接受数据并且处理。
Vue 3结合Element Plus中，实现一个级联选择器（Cascader）来展示省市区
weixin_73060959的博客
09-04 1627
在Vue 3结合Element Plus中，实现一个级联选择器（Cascader）来展示省市区（甚至到更细分的级别，如街道、小区等）的联动选择是一个常见的需求。Element Plus的Cascader组件非常适合这样的场景，因为它支持多级联动。以下是一个基本的步骤和示例，说明如何在Vue 3项目中使用Element Plus的Cascader组件来实现省市区（甚至更多级）的联动选择。
基于element-plus和element-china-area-data的中国省、市、区的地区选择器
jiede8624的博客
02-18 4661
实现新增地址时省、市、区的地区选择，如果使用手写json的方式，由于中国的省、市、区数量很多，会导致工作量很大，且容易出错。
elementUI 地址回显(默认地址)
我灰灰凭啥输
08-06 2114
elementUI cascader地址回显（默认展示地址）效果图 引入elementUI地区组件（element-china-area-data） npm install element-china-area-data -S provinceAndCityData是省市二级联动数据（不带“全部”选项） regionData是省市区三级联动数据（不带“全部”选项） provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项） regionDataPlus是省市区三级联动数据
vue2 省市区联动组件封装
不会写代码的前端
01-17 2128
这里使用element ui得el-select组件，思路是使用监听。
省市区街道/乡镇四级联动vue3
weixin_59124055的博客
02-27 3117
省.市.区/县、乡镇/街道的四级联动组件，技术栈是element + vue3，是输入框输入地址和选择省市区乡镇的的联动效果，毕竟大部分人能选的话不会手输，如果不用的话直接禁用输入框就行，省下很多逻辑处理。可以参考这个地址，直接在浏览器下载也行，git 克隆到本地也行，这个json文件很大，大概两三兆，可以让后端返回。下面进入正文： （说一下主要流程,最后附上全部代码）肯定涉及到父组件值的传入和子组件的值传出。
vue3 element-plus 练级选择器
03-13
### Vue 3 中使用 Element Plus 实现级联选择器 (Cascader) 在 Vue 3 和 Element Plus 的组合下，可以方便地创建一个用于显示省市区的级联选择器。这不仅限于三级结构，还可以扩展到更多的级别。 #### 安装依赖 为了开始构建应用，需安装必要的库： ```bash npm install vue@next npm install element-plus ``` 确保项目配置支持按需加载组件以优化性能[^1]。 #### 创建 Cascader 组件实例 定义数据源 `options` 来表示不同级别的选项列表。对于省市区的选择场景来说，这些通常是预先准备好的 JSON 数据或者通过 API 动态获取的数据集。 下面是一段简单的代码片段展示了如何初始化并渲染一个带有默认值的级联选择框： ```html <template> <el-cascader :options="options" v-model="selectedOptions"></el-cascader> </template> <script setup lang="ts"> import { ref } from 'vue'; // 示例省份城市区县数据 const options = [ { value: 'zhejiang', label: '浙江', children: [{ value: 'hangzhou', label: '杭州', children: [{value:'xihu',label:'西湖'}], }], }, ]; let selectedOptions = ref([]); </script> ``` 此模板中的 `el-cascader` 是来自 Element Plus 的组件标签名；`:options` 属性绑定到了本地状态变量 `options` 上面，而 `v-model` 则用来双向绑定选中项至另一个响应式的数组 `selectedOptions`。 当用户交互时，所选路径会自动更新到该模型上，并且可以通过监听事件进一步处理逻辑操作。 #### 自定义样式与功能增强 如果希望自定义外观或增加额外的功能特性（比如搜索过滤），可以根据官方文档提供的参数来进行调整。例如，添加属性 `filterable` 启用筛选模式，使输入框能够快速定位目标节点[^2]。 此外，也可以利用插槽机制来定制内部布局或是覆盖默认的行为表现形式。 #### 处理异步加载子项 针对大型树状结构下的延迟加载需求，可通过设置 `lazy` 参数配合 `loadData` 方法实现懒加载效果。每当展开某个父节点前都会触发对应的回调函数去请求新的子元素集合。 ```javascript { lazy: true, loadData(node, resolve) { setTimeout(() => { const nodes = Array.from({ length: 3 }, (_, i) => ({ value: `${node.value}-${i}`, label: `Item ${i}` }) ); resolve(nodes); }, 500); // 模拟网络延时 } } ``` 以上就是基于 Vue 3 和 Element Plus 构建多级联动选择控件的基础指南。实际开发过程中可根据具体业务要求灵活运用框架所提供的各项能力完成更复杂的应用设计。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十一猫咪爱养鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值