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

郑源龙

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

阅读量724

点赞数 9

文章标签： vue.js elementui javascript

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

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

版权

本文介绍了在H5项目中使用ElementUI的el-cascaderv-model组件时，如何处理省级市区数据的选填与编辑。包括数据存储时的数组转换（join()），以及编辑时从字符串转回数组的操作（split()）。

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

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数据太长我放到下两个文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

郑源龙

关注关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue3 - element-plus组件库el-cascader级联选择器，“动态数据懒加载+回显/编辑时自动选中对应节点“ 问题，多选复选框、单选框级联选择器如何让数据回显？数据是动态加载回显咋办

高级前端工程师

06-28

2749

elementPlus，vue3，element plus el-cascader 回显，级联选择器，回显，懒加载，el-cascader 动态加载选项、编辑时数据回显问题、单选不加载下一级节点，级联选择器动态懒加载以及回显，解决el-cascader回显失败问题，三级联动数据回显，省市区回显，el-cascader 动态加载，编辑时数据回显，Element-plus Cascader级联选择器动态加载模式下数据回显时的问题，el-cascader列表是动态的怎么回显，赋值后，不回显怎么办，数据还没加载怎

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

高级前端工程师

09-22

3374

vue2，element ui，城市选择器，省市区联动选择，Tree树组件列出省名称，全国省份列表，展开下级多级，vue2 elementUI实现省市区选择联动，地区选择器，把所有省份都展示出来，选择多个城市，省市区三级联动选择器，省市区json数据，树结构的城市列表，vue省市区tree树形级联，ElementUI级联和树形省市区，组件tree实现省市多级联动，vue省市区三级联动选择器，选择地址，选择地区，选择多个省市区、批量选择城市，选择当前位置，省市区数据懒加载，动态加载城市数据，插件，地址选择器组

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

前端H5项目，vue3创建省市区县三级联动的层级选择框组件

m0_58047199的博客

10-22

200

使用vue3+elementplus的级联选择器实现省市区联动（三级到五级）

qq_52696618的博客

04-29

2352

中华人民共和国行政区划（五级）：省级、地级、县级、乡级和村级。来自中华人民共和国民政部，用于查询中国省，市和区数据的网站。

中国省市区地区选择组件（ElementPlus + Vue3 + TS ）

weixin_43244253的博客

02-14

7855

vue3 + elementPlus +TS 地区选择组件

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

m0_60459392的博客

11-01

3683

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

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

weixin_44832362的博客

12-04

3472

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

中国省市三级联动选择器，vue3+element-plus(Select 选择器)写法,组件封装

最新发布

XinBoys的博客

11-09

392

中国省市三级级联动选择器，vue3+element-plus(Select 选择器)写法，组件封装

中国省市二级联动选择器，vue3+element-plus(Select 选择器)写法，组件封装

XinBoys的博客

11-09

330

这段代码实现了一个省市区选择器，用户可以选择省份和城市。

Vue3+Vite+TS基于Element plus 二次封装业务组件(含Vue3知识点)

郊眠寺

06-21

4692

使用Vue3+Vite+TS基于Element plus 二次封装业务组件，注册挂载为全局使用，代码简洁了许多。封装好我们的业务组件今后开发中遇到时，就可以直接使用啦！前提，你已经安装好了相关node环境依赖，查看vite的start连接一般的再这样，最后，就可以看到这样二、安装Element plus 依赖首先要这样，我们进入element plus的官方文档执行如下安装命令我们再这样在项目中引入，直接全局引入，打包后体积不会相差多少，而且全局引入代码整洁好看。如果我们

2.vue中element-china-area-data依赖和element-plus级联选择器构建省市区三级联动

yangyangdt的博客

01-27

2492

vue中element-china-area-data依赖和element-plus级联选择器构建省市区三级联动

element-plus---Cascader三级联动地区选择---json数据

08-19

适用于element-plus 的 Cascader三级联动地区选择---json数据，

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

小小的胡萝卜的博客

11-08

1225

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

vue3 + element plus 省市区

娄小研的博客

08-02

298

【代码】vue3 + element plus 省市区。

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

jiede8624的博客

02-18

3408

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

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

weixin_44072127的博客

01-09

1037

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

element + vue3，级联选择器实现省市区

irisMoon06的博客

11-20

1279

由于es6支持哈希，所以数据量只要不太大，就不需要对el-cascader进行点击后在调接口出现下一级，很简单的就是直接获取所有数据。

element-plus el-cascader 懒加载实现-省市区街道选择及回显

Li_Ning21的博客

05-07

1488

【代码】element-plus el-cascader 懒加载实现-省市区街道选择及回显。

vue3.x element-plus 实现省市区三级联动

小鱼干儿

02-09

5813

安装 yarn add element-china-area-data 版本 5.0.2 js部分 //引用 element-china-area-data import { regionData } from 'element-china-area-data' const handleChange = (value) => { console.log(value) } tempalte部分 <el-cascader placeholder="请选择地区" size="defaul

vue3加element-ui如何使用el-cascader进行省市区的选择

05-27

要在 Vue3 中使用 Element UI 的 Cascader 组件实现省市区选择，需要进行以下步骤： 1. 安装 Element UI 可以使用 npm 或者 yarn 安装 Element UI： ``` npm i element-plus -S ``` 或者 ``` yarn add element-...

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

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