在 Vue 项目中使用地区级联选

在 Vue 项目中使用地区级联选择的完整流程:

1.安装依赖包,这个包提供了中国省市区的完整数据。

npm install element-china-area-data --save

 2.导入数据

import { regionData } from 'element-china-area-data'

这个包提供了几种不同的数据格式:

  • regionData: 省市区三级联动数据
  • provinceAndCityData: 省市二级联动数据

3.数据格式说明

// regionData 的数据结构

[

  {

    value: '110000',    // 地区编码

    label: '北京市',    // 地区名称

    children: [         // 子地区

      {

        value: '110100',

        label: '北京市',

        children: [

          {

            value: '110101',

            label: '东城区'

          }

          // ... 其他区

        ]

      }

    ]

  }

  // ... 其他省份

]

 4.在模板中使用级联选择器

<el-form-item label="所在地区" prop="location"><el-cascaderv-model="registerForm.location":options="locationOptions"placeholder="请选择所在地区":props="{value: 'value',    // 指定选项的值为选项对象的 value 属性label: 'label',    // 指定选项标签为选项对象的 label 属性children: 'children'// 指定选项的子选项为选项对象的 children 属性}"style="width: 100%"/>
</el-form-item>

5.在 setup 中定义数据

const registerForm = ref({location: []  // 用于存储选择的地区编码数组
})// 在 return 中返回数据
return {locationOptions: regionData,  // 地区数据registerForm
}

6.处理选择的数据

const handleRegister = async () => {// location 数组中包含了选择的地区编码// 例如:['110000', '110100', '110101'] 表示 北京市/北京市/东城区const locationText = registerForm.value.location.join('/')// 发送到后端的数据const registerData = {// ... 其他数据company: {location: locationText,  // 转换成文本格式:'110000/110100/110101'// ... 其他数据}}
}

7.添加表单验证

// area-data.js
export const customRegionData = [{value: 'region1',label: '地区1',children: [{value: 'city1',label: '城市1',children: [{value: 'district1',label: '区域1'}]}]}
]

8.效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/68041.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入学习 Python 爬虫:从基础到实战

深入学习 Python 爬虫&#xff1a;从基础到实战 前言 Python 爬虫是一个强大的工具&#xff0c;可以帮助你从互联网上抓取各种数据。无论你是数据分析师、机器学习工程师&#xff0c;还是对网络数据感兴趣的开发者&#xff0c;爬虫都是一个非常实用的技能。在本文中&#xff…

npm i 报错

nodejs中 使用npm install命令时报错 npm err! file C: \user\admin\package.json_package.json 里缺少 description 和 repository 两个n字段。-CSDN博客

基于改进粒子群优化的无人机最优能耗路径规划

目录 1. Introduction2. Preliminaries2.1. Particle Swarm Optimization Algorithm2.2. Deep Deterministic Policy Gradient2.3. Calculation of the Total Output Power of the Quadcopter Battery 3.OptimalEnergyConsumptionPathPlanningBasedonPSO-DDPG3.1.ProblemModell…

Redis为 List/Set/Hash 的元素设置单独的过期时间

一.业务简介 我们知道&#xff0c;Redis 里面暂时没有接口给 List、Set 或者 Hash 的 field 单独设置过期时间&#xff0c;只能给整个列表、集合或者 Hash 设置过期时间。 这样&#xff0c;当 List/Set/Hash 过期时&#xff0c;里面的所有 field 元素就全部过期了。但这样并不…

Mysql常见知识点

Mysql是最常用的数据库了。 1、什么是关系型数据库&#xff1f; 关系型数据库&#xff08;RDB&#xff0c;Relational Database&#xff09;就是一种建立在关系模型的基础上的数据库。关系模型表明了数据库中所存储的数据之间的联系&#xff08;一对一、一对多、多对多&#…

【51单片机】03 蜂鸣器-播放音乐

蜂鸣器-播放音乐 一、原理介绍1.硬件电路 二、练习1.让蜂鸣器发声2.尝试演奏小星星 一、原理介绍 蜂鸣器分为有源蜂鸣器、无源蜂鸣器两种。 有源蜂鸣器&#xff1a;施加合适的电压之后就会发出特定频率的声音 无源蜂鸣器&#xff1a;需要提供特定频率的声音信号&#xff0c;才能…

leetcode热题100——NO.206反转链表——JAVA

一、题目描述 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 二、题目分析 双指针操作&#xff1a;prev指针&#xff0c;curr指针&#xff1b; 对单链表的理解&#xff1a;包含属性&#xff08;成员变量&#xff09;和方法&#xff1…

30_Redis哨兵模式

在Redis主从复制模式中,因为系统不具备自动恢复的功能,所以当主服务器(master)宕机后,需要手动把一台从服务器(slave)切换为主服务器。在这个过程中,不仅需要人为干预,而且还会造成一段时间内服务器处于不可用状态,同时数据安全性也得不到保障,因此主从模式的可用性…

汽车基础软件AutoSAR自学攻略(四)-AutoSAR CP分层架构(3) (万字长文-配21张彩图)

汽车基础软件AutoSAR自学攻略(四)-AutoSAR CP分层架构(3) (万字长文-配21张彩图) 前面的两篇博文简述了AutoSAR CP分层架构的概念&#xff0c;下面我们来具体到每一层的具体内容进行讲解&#xff0c;每一层的每一个功能块力求用一个总览图&#xff0c;外加一个例子的图给大家进…

51单片机——定时器中断(重点)

STC89C5X含有3个定时器&#xff1a;定时器0、定时器1、定时器2 注意&#xff1a;51系列单片机一定有基本的2个定时器&#xff08;定时器0和定时器1&#xff09;&#xff0c;但不全有3个中断&#xff0c;需要查看芯片手册&#xff0c;通常我们使用的是基本的2个定时器&#xff…

【STM32-学习笔记-1-】GPIO

文章目录 GPIOⅠ、GPIO函数Ⅱ、GPIO_InitTypeDef结构体参数①、GPIO_Mode②、GPIO_Pin③、GPIO_Speed GPIO Ⅰ、GPIO函数 // 将指定的GPIO端口寄存器重置为默认值 void GPIO_DeInit(GPIO_TypeDef* GPIOx);// 将GPIO的备用功能寄存器重置为默认值 void GPIO_AFIODeInit(void);…

LeetCode热题100-合并两个有序链表【JavaScript讲解】

题目&#xff1a; 题解&#xff1a; 我们目前已经知道两条链表都是有序链表&#xff0c;我们就可以通过迭代的方法实现上述问题。当list1和list2都不是空链表时&#xff0c;判断list1和list2哪个头节点的值更小&#xff0c;将较小的值添加到结果里&#xff0c;被添加到结果里的…

关于2025年信息技术行业的几点思考

2024年对每一位信息技术从业者而言&#xff0c;无疑是一个充满挑战的年份&#xff0c;尤其在公司层面&#xff0c;需求的减少尤为显著。外包企业几乎面临倒闭的边缘。面对经济周期的调整&#xff0c;无论是公司还是个人&#xff0c;都难以完全避免受到其影响。以下是我对企业和…

Artec Leo 3D扫描仪与Ray助力野生水生动物法医鉴定【沪敖3D】

挑战&#xff1a;捕获大型水生哺乳动物&#xff08;如鲸鱼&#xff09;的数据&#xff0c;搭建全彩3D模型&#xff0c;用于水生野生动物的法医鉴定、研究和保护工作。 解决方案&#xff1a;Artec Eva、Artec Space Spider、Artec Leo、Artec Ray、Artec Studio、CT scans 效果&…

HBuilderX打包ios保姆式教程

1、登录苹果开发者后台并登录已认证开发者账号ID Sign In - Apple 2、创建标识符&#xff08;App ID&#xff09;、证书&#xff0c;描述文件 3、首先创建标识符&#xff0c;用于新建App应用 3-1、App的话直接选择第一个App IDs&#xff0c;点击右上角继续 3-2、选择App&#x…

Android DataBinding 结合 ViewModel的使用

Android DataBinding 结合 ViewModel的使用 一、build.gradle引入对应的依赖 在build.gradle&#xff08;app模块&#xff09;里引入依赖&#xff0c;然后Sync Now一下&#xff1a; android {​viewBinding {enabled true}dataBinding {enabled true}} 完整的build.gradle代…

动植物基因表达调控

1&#xff0c; on and off状态 以及表达的量 2&#xff0c; 基因调控的生物学影响&#xff1f; 超过400多种细胞类型&#xff0c;数目上37万亿 不是所有的基因都表达 为什么多核真核细胞需要基因调控&#xff1f; 单个细胞往多个细胞逐渐进化的过程&#xff0c;形成复杂的…

2024年度漏洞态势分析报告,需要访问自取即可!(PDF版本)

2024年度漏洞态势分析报告&#xff0c;需要访问自取即可!(PDF版本),大家有什么好的也可以发一下看看

acwing-3194 最大的矩形

acwing-3194 最大的矩形 这个题程序设计课上有讲过&#xff0c; 平民算法&#xff0c;时间复杂度在 O ( n 2 ) O(n^2) O(n2) // // Created by HUAWEI on 2024/10/28. // #include<iostream>using namespace std;const int Max_size 1e4 20;int N; int h[Max_size];…

【数据结构】树的定义

在计算机科学中&#xff0c;树&#xff08;Tree&#xff09;是一种重要的基础数据结构&#xff0c;广泛应用于许多领域&#xff0c;如文件系统的目录结构、数据库的索引、编译器的语法树、人工智能的决策树等。理解树的基本概念和术语&#xff0c;对于学习计算机科学及其相关技…