vue+element Cascader 级联选择器 > 实现省市区三级联动

news2024/10/5 19:21:09

vue+element Cascader 级联选择器 > 实现省市区三级联动

先看下实现效果吧(嘻嘻)

在这里插入图片描述
看完我们就开始啦

安装element-china-area-data1


npm install element-china-area-data@5.0.2  -S

在这里插入图片描述

上代码


<el-cascader
  size="large"
  :options="options"
  v-model="selectedOptions"
  @change="handleChange"
>
</el-cascader>
              
import { regionData, CodeToText } from "element-china-area-data";

handleChange(val) {
  var loc = "";
  for (let i = 0; i < this.selectedOptions.length; i++) {
    loc += CodeToText[this.selectedOptions[i]] + "-";
  }
  let arr = [loc.split("-")[0], loc.split("-")[1], loc.split("-")[2]]

  this.form.nativeplace = arr.join('')
}

完美(实现后别忘记动动小手点个赞哦~)


  1. 请安装指定版本的element-china-area-data(5.0.2),否则可能会导致报错:CodeToText为undefined(我就遇到了(嘘),要注意哦~) ↩︎

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

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

相关文章

我的创作纪念日-静下来走一段路

静下来走一段路 机缘 前段时间收到了公司发的入职周年庆典的邮件&#xff0c;发觉已经在程序员的工作上走了这么多年了。 原本想写些东西只是为了生成一些可供自己反复查看的笔记&#xff0c;后来为了督促自己学习&#xff0c;博客越学越多。 回忆起我写的第一篇博客《芯片、模…

移动端开发框架mui之上拉刷新、下拉加载数据(选项卡左右移动自动和刷新指定选项卡内容)

移动端开发框架mui之上拉刷新、下拉加载数据&#xff08;加载多选项卡数据&#xff09; 之前的代码&#xff1a; <!doctype html> <html><head><meta charset"utf-8"><title></title><meta name"viewport" cont…

JVM内存结构—— 程序计数器,虚拟机栈 解析

JVM的内存结构 1. 程序计数器(PC Register )寄存器 1.1 全称:Program Counter Register 1.2 作用 首先,java源代码 被 编译成 二进制的 字节码 (jvm指令) jvm跨平台就是这一套指令,linux 下,windows下指令都是一致的 指令 经过 解释器 把每一条指令 解释成 机器码…

在Vue中如何根据下拉框选中的值 展示不同的输入框

大纲&#xff1a; &#x1f333; 1、怎么根据下拉框中选中的值展示不同的输入框呢&#xff1f; 我们可以使用change事件来进行处理。当我们选中收费类型的其中一个就触发change事件&#xff0c;然后根据选中的value值&#xff0c;对数据进行展示与隐藏 即可。 &#x1f951; …

BIO、NIO、AIO之间有什么区别

一、简介 在计算机中&#xff0c;IO 传输数据有三种工作方式&#xff0c;分别是&#xff1a; BIO、NIO、AIO。 在讲解 BIO、NIO、AIO 之前&#xff0c;我们先来回顾一下这几个概念&#xff1a;同步与异步&#xff0c;阻塞与非阻塞。 同步与异步的区别 同步就是发起一个请求后…

“从草图到魔法:使用ClipDrop - Stable Doodle将你的想象变成真实图像“

ClipDrop - Stable Doodle 是一款将手绘草图转换为真实图像的工具&#xff0c;您可以按照以下步骤使用它&#xff1a; 1、打开https://clipdrop.co/stable-doodle 2、使用鼠标画一幅画 3、输入提示词&#xff0c;比如&#xff1a;mikey mouse 按“generate”按钮 4、结果

春秋云境—Initial

文章目录 春秋云境—Initial一、前期准备1、靶标介绍2、相关设备 二、WEB渗透1、ThinkPHP RCE&#xff08;1&#xff09;、打开网站&#xff08;2&#xff09;、检测漏洞 2、蚁剑连接3、sudo提权4、frpc代理5、fsacn扫描 三、后渗透1、信呼OA RCE&#xff08;1&#xff09;、1.…

Android 14适配

Google I/O 2023 发布的 Android beta2 &#xff0c;Android 14 将在2023年第三季度发布。Google Play 已经开始强制要求targetSdkVersion 33适配&#xff0c;所以 targetSdkVersion 34适配也是非常有必要的。 前台服务类型&#xff08;Foreground service types are required&…

4. 设计(黑盒)测试用例 (一) 等价类 边界值 判定表

本篇文章我们将详细介绍如何来测试用例。 1. 设计测试用例的基本要素 1.1 测试用例概念 测试用例&#xff08;Test Case&#xff09;是为了实施测试而向被测试的系统提供的一组集合。 1.2 测试用例要素 测试环境、测试步骤、测试数据、预期结果。 1.3 测试用例的重要性 提…

架构训练营学习笔记:4-1存储架构模式之数据库存储架构

一 数据库读写分离 适应场景&#xff1a;互联网读多写少。 原理&#xff1a;主机负责写&#xff0c;从机可以多个负责读取。数据主从做同步。 业务的写发给主机&#xff0c;读操作发给从机。 条件&#xff1a;1业务量增长 2 其他优化条件已处理&#xff08;索引优化、缓存&a…

Linux学习之环境变量、预定义变量和位置变量

环境变量是每个Shell打开就能获取到的变量&#xff0c;即一打开终端就已经初始化的变量。 显示环境变量 set、env和declare都可以查看变量的值。按照可以查看信息的范围从小到大是env<set<declare。 env只能显示全局变量。 set可以输出所有的变量&#xff0c;包括全局…

多数据源切换、读写分离-02

使用dynamic进行数据源切换、读写分离 特性 1、支持数据源分组 &#xff0c;适用于多种场景纯粹多库读写分离一主多从混合模式。 2、支持数据库敏感配置信息 加密 ENC()。 3、支持每个数据库独立初始化表结构schema和数据库database。 4、支持无数据源启动&#xff0c;支持懒加…

【已解决】pyecharts大屏点击Save Config没反应,无法保存chart_config.json

在使用pyecharts开发大屏时&#xff0c;临时大屏拖拽好之后&#xff0c;点击Save Config之后没反应&#xff0c;没有弹出json保存对话框。 报错现象&#xff1a; 利用Python的pyecharts库的Page组件开发可视化大屏时&#xff0c;无法点击Save Config按钮。 问题原因&#xff1…

sonarqube安装并配置CI/CD

sonarqube安装使用 目录 简介效果(配置在下面查看)官方文档环境准备配置compose-sonarqube.yml启动登录集成Gitlab 获取私钥sonarqube配置gitlab查看项目 配置 手动方式Gitlab CI/CD 自动检测 简介 SonarQube是一个开源的代码质量管理平台&#xff0c;用于对代码进行静态代…

Kong简介

Kong 是一个开源的云原生 API 网关和服务网格&#xff0c;它提供了强大的流量控制、请求转发、日志记录、认证和授权等功能。 一、Kong Consumer Kong Consumer 是 Kong API 网关中的一个重要概念&#xff0c;它代表使用你的 API 的最终用户或客户端。Consumer 的创建和配置可…

Spring AOP知识点详解

Spring AOP是 Spring最核心的能力&#xff0c;那到底什么是AOP呢&#xff0c;今天了不起带大家了解一下。 AOP是什么 AOP(Aspect Oriented Programming):面向切面编程&#xff0c;是OOP(面向对象编程)的一个延续&#xff0c;其和OOP一样&#xff0c;也是一种编程思想&#xff0…

在Linux下做性能分析3:perf

介绍 ftrace的跟踪方法是一种总体跟踪法&#xff0c;换句话说&#xff0c;你统计了一个事件到下一个事件所有的时间长度&#xff0c;然后把它们放到时间轴上&#xff0c;你可以知道整个系统运行在时间轴上的分布。 这种方法很准确&#xff0c;但跟踪成本很高。所以&#xff0…

有道云笔记迁移到自建服务器Joplin

当前有道云笔记各项业务开始逐渐向会员靠拢&#xff0c;如一开始不受限的多端同步现在非会员限制成了两个终端&#xff0c;估计以后会有越来越多的免费内容会逐渐的向会员转移&#xff0c;因此博主开始考虑自建服务器来搞一个云笔记服务端。 因博主已有黑群晖&#xff0c;并且有…

OK3588运行python程序对摄像头数据进行图像处理

OK3588运行python程序读取usb摄像头 硬件连接用工具测试验证摄像头工作正常python 读取usb摄像头并进行图像处理 硬件连接 把usb摄像头插入HOST的usb接口。 在串口终端运行 sudo v4l2-ctl --list-devices 如下图 当前的usb设备是 /dev/video74 用工具测试验证摄像头工作正常…