选择省市区组件数据基于vue3 + elment-plus

郑源龙

已于 2024-01-05 14:55:58 修改

阅读量645

点赞数 9

文章标签： vue.js elementui javascript

于 2024-01-05 14:50:45 首次发布

本文链接：https://blog.csdn.net/weixin_69811594/article/details/135409418

版权

h5

<el-cascader v-model="form.area" :props="{value: 'label',label: 'label' }" :options="jsonData" @change="handleChange" style="width: 100%;" />

script

import jsonData from '@/utils/city.json';

选完省市区数据是一个数组状态[0:山东省 ,1:济南市,2:历下区]

保存前需要join() 一下转成字符串

编辑回显时的时候需要split()一下再转回数组回显

json数据太长我放到下两个文章

优惠劵

郑源龙

关注关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
选择省市区组件数据基于vue3 + elment-plus

选择省市区组件数据基于vue3 + elment-plus
复制链接

扫一扫

基于vue3+element-plus的管理系统.zip

05-16

vue3 Ts ElementPlus组件封装(2) 封装省市区选择组件

weixin_44072127的博客

01-09

958

vue3 Ts ElementPlus组件封装， 省市区选择组件

参与评论您还未登录，请先登录后发表或查看评论

基于element-plus和element-china-area-data的中国省、市、区的地区选择器

jiede8624的博客

02-18

1450

实现新增地址时省、市、区的地区选择，如果使用手写json的方式，由于中国的省、市、区数量很多，会导致工作量很大，且容易出错。

vue3-element-admin：vue3 + element-plus + typescript 后台管理系统

05-04

vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。后端是基于 Spring Boot 3.0 、Spring Security 6.0 、 JWT 、 Redis 、 Mybatis-Plus 、 Knife4j 等技术栈搭建的前后端分离开源权限管理系统。在线预览地址：http://vue3.youlai.tech 开源仓库地址：https://gitee.com/youlaiorg/vue3-element-admin 后端仓库地址：https://gitee.com/youlaiorg/youlai-boot

基于vue3+element-plus的一个物资后台管理系统源码.zip

06-15

基于vue3+element-plus的一个物资后台管理系统源码.zip

Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统

05-02

Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios

利用级联选择器实现省市区三级联动【vue + elementUI Plus | uViewUI】

qq_36687211的博客

03-29

6453

利用级联选择器实现省市区三级联动

基于elementui plus + vue3 + ts封装省市区乡镇通用下拉框组件

m0_46533814的博客

12-18

811

加深 vue3的印象，巩固之前忘掉的知识，包括props父子组件传参、emit事件机制、watch的用法。省市区数据下载地址已经更新

vue + element-ui 实现省市区三级联动选择组件

keke11211的博客

08-18

2375

1. 实现如下图所示的省市区三级联动选择组件； 2. 新建公共组件文件 global-city文件夹，里面包含组件文件：index.vue，和3个js文件分别装着省市区的code值和名称 3. 组件代码：index.vue <template> <div class="areaSelect flex"> <el-select :disabled="disabled" v-mod.

基于 vue3 element-plus 省市区联动组件

weixin_44832362的博客

12-04

3153

基于 vue3 element-plus 省市区联动组件

vue3-element-plus-typescript：基于vue-cli vite + vue3.0 + element-plus + typescript +模拟数据的后台管理系统列表页增删改查功能

02-14

vue3-element-plus-typescript 基于vue-cli / vite + vue3.0 + element-plus +打字稿+ mock数据的后台管理系统列表页增删改查功能 vue-cli版： : vite版： : 系统模块数据是mock数据使用了Vue3.0全家桶，Element-plus和typescript，实践vue3.0的新特性以及vite打包工具，采用的是vue3.0的组成API，体验vue3和typescript以及打包工具vite等页面功能列表页列表页增删改改查采用vue3 composition api typescript在项目中运用，提供类型检查模拟数据，支持网络查看请求接口返回数据用typescript泛型约束 vue3-element-plus-typescript yarn install 编译和热重装以进行开发

基于vue3和element-plus的省市区级联组件,elui-china-area-dht发布

海天酱油zz

01-05

3524

说明其实该组件很简单，核心在于全国省市区数据的来源，还有数据格式化以及组件封装。然后大家应该知道在vue2阶段其实有一个省市区的第三方封装的组件，我想大家应该不少人使用过。看源码，作者应该暂时没有发布vue3的计划。那么我这里就提前一步给大家个福利。使用的话直接看使用部分就行了。核心原理数据基于：https://github.com/airyland/china-area-data 根据第三方提供的省市区数据部分，将数据改为element-plus所需的嵌套数据结构封装Chin

基于vue3.2的element-plus省市区选择器

m0_60459392的博客

11-01

3261

下载安装命令 npm i elui-china-area-dht。leave 数据可选层级，3代表省市区三级级联选项。基于vue3.2的element-plus省市区选择器。

【Strelitzia项目】vue3+ts实现element-plus中选择器省市区三级联动

小小的胡萝卜的博客

11-08

1073

最近在部署项目时，想要做一个收货地址的功能，但是仅凭用户自己去输入地址感觉不太规范，假设用户输入了一个假的地址改如何处理呢，所以需要做出一个比较规范的选择器来解决这个问题。但是在这个问题的过程中存在着不少疑惑，首先就是百度找不到vue3+ts的代码，而自己本身又是后端开发人员，所以在技术层面存在着不少的疑问，vue2编写代码的方式不太熟练。参考文章。

【在线OJ】Vue创建OJ管理系统

qq_61903414的博客

05-07

221

vue ui命令创建项目项目创建完成后来到项目。

毕业就业信息|基于Springboot＋vue的毕业就业信息管理系统的设计与实现(源码+数据库+文档)

伟庭的博客

05-07

987

毕业就业信息管理系统在对开发工具的选择上也很慎重，为了便于开发实现，选择的开发工具为Eclipse，选择的数据库工具为Mysql。以此搭建开发环境实现毕业就业信息管理系统的功能。其中管理员管理用户，新闻公告。毕业就业信息管理系统是一款运用软件开发技术设计实现的应用系统，在信息处理上可以达到快速的目的，不管是针对数据添加，数据维护和统计，以及数据查询等处理要求，毕业就业信息管理系统都可以轻松应对。关键词：毕业就业信息管理系统；SpringBoot框架，系统分析，数据库设计。

根据地址栏url上key获取值

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交

选择 省市区 组件数据 基于vue3 + elment-plus

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

选择省市区组件数据基于vue3 + elment-plus