vue+elementUI 省市县地区级联选择 行政区划

最新推荐文章于 2024-05-16 02:28:08 发布
最新推荐文章于 2024-05-16 02:28:08 发布
阅读量7.9k 收藏 11
点赞数 3
文章标签： elementUI 省市联动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43225030/article/details/102484839
版权
本文介绍如何利用Vue和ElementUI组件库，实现省市区三级联动的下拉选择框，其中value为行政区划代码。通过引入特定的JSON数据文件，即可完成级联效果，相关代码和资源可在作者提供的链接中获取。
摘要由CSDN通过智能技术生成

省市的二级联动下拉选择框，value是行政区划
在这里插入图片描述

省市县的三级联动的下拉选择框，value是行政区划
在这里插入图片描述

使用步骤：
把json文件引进来，二级联动和三级联动的代码是一样的，只是json文件不一样，文件在我的上传资源里

<el-cascader v-model="areaValue"
最低0.47元/天 解锁文章
kksw1121
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
echarts地图省市区三级下钻联动
04-06
vue echarts地图三级下钻，默认全国地图，例如点击湖北省进入湖北省地图，然后点击武汉进入武汉市地图，点击上一级返回，Vue写法，js写法类似
基于vue+element的一个省市选择option.js
05-09
直接写死的一个option文件，可以应用到其他类似的ui组件中
Vue + ElementUI 实现全国各个省份相对应城市的联动选择_vue+elementui 省市区联动
2401_84433829的博客
04-29 882
定义相对应的数据字段 defaultMerchant （这里同理，与此次问题无关的字段不写入），同时初始化 Vue 实例的数据对象然后要做一个省份列表和城市列表，我看很多小伙伴是把这部分相关数据以 JSON 形式写在页面里或者存在数据库里，这样个人感觉有两点不足吧？**一是数据量很大，占用文件很多行数，降低性能和代码的可读性。二是数据不能进行实时更新（假如哪天新多出个城市或者城市改名什么的要去更改内容也麻烦）。但是，这样请求到的数据比较实时、全面、准确，相比上面的做法会好很多，我们要做的就是。
省-市-区三级联动选择地址 + 地图定位(高德api定位获取位置信息)，互相联动显示
徐子厚的博客
05-12 4275
一，前言 需求：省市区三级联动下拉选择出数据并地图显示位置，地图上选择定位位置三级联动反显出省市区； 准备： 1.需要全国地址完整(省市区-地区code)的area.json，下载area.js资源。 2.地址定位这里用的是高德api故需要申请高德web开发相关申请配置 见这篇。 二，实现 1.html:这里用的vue <template> <!-- 省市区三级联动 --> <el-form label-width="110p...
Vue + ElementUI 实现全国各个省份相对应城市的联动选择_vue+elementui 省市区联动(2)
最新发布
2401_84617681的博客
05-16 672
*一是数据量很大，占用文件很多行数，降低性能和代码的可读性。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。定义相对应的数据字段 defaultMerchant （这里同理，与此次问题无关的字段不写入），同时初始化 Vue 实例的数据对象。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。但是，这样请求到的数据比较实时、全面、准确，相比上面的做法会好很多，我们要做的就是。的结构写法（这不是本次问题的重点，同时省略去掉与此次问题无关的其他表单项），
使用vue elementUI设置省市县三级联动的下拉列表框
热门推荐
Zhou_siyue的博客
04-01 2万+
在前端项目开发中，经常会遇到省市县三级联动的下拉列表框组的问题，许多小伙伴第一次遇到这种问题的时候都会感觉无从下手，今天就给大家分享以下我的实现方法，希望能给大家在这方面的问题上提供一些帮助和解决的思路，以便今后在遇到同类问题的时候可以轻松应对，以下内容为具体的实现过程： ...
VUE2,基于 el-tree 组件基础上封装的 省市区/县 选择器
qq_41775006的博客
09-21 2275
vue2,在 el-tree 组件基础上封装的 省市区/县 选择组件。
vue 城市选择器（省市区）的使用 element-china-area-data
weixin_55966654的博客
03-23 2万+
本文参考：Element UI 中国省市区级联数据 本文参考：根据此文做的整理 2. 使用 regionData是省市区三级联动数据（不带“全部”选项） CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市 extToCode是个大对象，属性是汉字，属性值是区域码用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京
前端数据处理——mapData
weixin_37877794的博客
05-09 1104
var aaa =[{ region_code: '450100000000', region_name: '南宁市', parent_code: '450000000000' }, { region_code: '450102000000', region_name: '兴宁区', parent_code: '450100000000' }, { region_code: '450103000000', region_name: '青秀区', parent_code: '450100000000'
Element UI 自定义省市区三级联动选择组件
实践求真知
02-15 2068
Element UI 自定义省市区三级联动选择组件
基于Vue+ElementUI的省市区地址选择通用组件
10-15
主要介绍了基于Vue+ElementUI的省市区地址选择通用组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于Spring Boot+Vue+ElementUI的人力资源管理系统源码+项目说明+数据库+文档.zip
03-05
基于Spring Boot+Vue+ElementUI的人力资源管理系统源码+项目说明+数据库+文档.zip高分通过项目，已获老师指导。本项目是一套基于SpringBoot的人力资源管理系统，主要针对计算机相关专业的正在做毕设的学生和需要项目...
vue + elementUI实现省市县三级联动的方法示例
12-13
本文介绍了vue + elementUI实现省市县三级联动的方法示例，分享给大家，具体如下：   1、首先需要准备省市县json文件，网上有很多可以下载。项目中使用的city.json数据是这样的格式： [ { "value": "110000", ...
基于vue + elementUI的管理系统模板
02-22
3. **基于Vue + ElementUI的管理系统模板**： - **路由管理**：通常会使用Vue Router进行页面路由管理，实现单页应用（SPA）的页面跳转和参数传递。 - **状态管理**：Vuex是Vue.js的状态管理模式，用于集中管理...
vue + element-ui 实现省市区三级联动选择组件
keke11211的博客
08-18 2438
1. 实现如下图所示的省市区三级联动选择组件； 2. 新建公共组件文件 global-city文件夹，里面包含组件文件：index.vue，和3个js文件分别装着省市区的code值和名称 3. 组件代码：index.vue <template> <div class="areaSelect flex"> <el-select :disabled="disabled" v-mod.
【vue+elementUI】通过读取本地文件，实现全国省市区的级联选择
string佳佳的博客
06-21 485
读取本地文件，获取中国地理数据信息：如何读取本地文件 文件下载地址代码部分：
百度地图API获取行政区域边界（省、市、区县）
zgphacker2010的专栏
12-31 2万+
百度地图开发常用网站 1、百度地图开放平台 http://lbsyun.baidu.com/ 2、百度地图Javascript API JavaScript API v3.0http://lbsyun.baidu.com/index.php?title=jspopular3.0 JavaScript API v2.0http://lbsyun.baidu.com/ind...
百度地图api 区级以下行政区划
weixin_34221073的博客
12-04 1060
我们在使用百度地图api想要展示苏州市吴中区各乡镇的行政区范围； 百度api有提供了“添加行政区划”的示例：http://lbsyun.baidu.com/jsdemo.htm#c1_10 但该功能目前只能展示区级及以上范围行政区划 ------------------------------------------------------------------------------...
Vue+ElementUI前端开发手册
10-12
Vue+ElementUI前端开发手册是一份详尽的指南，专为初级和中级前端开发者设计，旨在帮助他们快速上手Vue框架和ElementUI组件库的集成开发。这份文档不仅适用于前端开发人员进行项目搭建和界面设计，同时也可供后端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值