vue 中国省市区级联数据 三级联动

vue 中国省市区级联数据 三级联动

  1. 安装插件 npm install element-china-area-data@5.0.2 -S 当前版本以测试,可用。
  2. 组件中使用了 element-ui, https://element.eleme.cn/#/zh-CN/component/installation 库 请注意安装。
  3. 插件文档 https://www.npmjs.com/package/element-china-area-data
  4. 先上图
    在这里插入图片描述
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b5a0ab5c8fdc4cadbd8061e8a791e7f6.png

在这里插入图片描述

  1. 在components文件夹下面新建 mpAreaSelect.vue
<template><el-cascader:options="options":disabled="disabled":placeholder="placeholder":value="selectedOptions"@change="handleChange":clearable="clearable"></el-cascader>
</template><script>
import  {provinceAndCityDataPlus,regionData,TextToCode,CodeToText,
} from 'element-china-area-data'
export default {name: 'mpAreaSelect',computed: {selectedOptions() {let selected = this.selected.filter((item) => item != '' && item != null)let len = selected.lengthlet textArr = []switch (len) {case 1:if(TextToCode[selected[0]]){textArr.push(TextToCode[selected[0]].code)}else{textArr = []}breakcase 2:if(TextToCode[selected[0]]){textArr.push(TextToCode[selected[0]].code)}else{textArr = []}if(TextToCode[selected[0]] && TextToCode[selected[0]][selected[1]]){textArr.push(TextToCode[selected[0]][selected[1]].code)}else{textArr = []}breakcase 3:if(TextToCode[selected[0]]){textArr.push(TextToCode[selected[0]].code)}else{textArr = []}if(TextToCode[selected[0]] && TextToCode[selected[0]][selected[1]]){textArr.push(TextToCode[selected[0]][selected[1]].code)}else{textArr = []}if(TextToCode[selected[0]] && TextToCode[selected[0]][selected[1]] && TextToCode[selected[0]][selected[1]][selected[2]]){textArr.push(TextToCode[selected[0]][selected[1]][selected[2]].code)}else{textArr = []}breakdefault:break}return textArr},options() {switch (this.level) {case 2:return provinceAndCityDataPluscase 3:return regionDatadefault:return regionData}},},props: {selected: {type: Array,default: [],},disabled: {type: Boolean,default: false,},placeholder: {type: String,default: '',},level: {type: Number,default: 3,},clearable:{type: Boolean,default: false,}},methods: {handleChange(value) {console.log(TextToCode)console.log(CodeToText)console.log(provinceAndCityDataPlus)console.log(regionData)console.log(value)this.$emit('change',value.map((item) => CodeToText[item]),value)},},
}
</script><style>
</style>
  1. 组件的使用
<template><div><div><div>请选择地区:</div><mp-area-selectstyle="width: 400px":selected="selected"placeholder="请选择地区"@change="changeAddress"></mp-area-select><div>回显地区:</div><mp-area-selectstyle="width: 400px":selected="selectedView"></mp-area-select></div></div>
</template>
<script>
import MpAreaSelect from '@/components/mpAreaSelect';
export default {components:{MpAreaSelect},data() {return {selected:[],selectedView:[],};},mounted(){this.$nextTick(()=>{this.selectedView = ["北京市", "市辖区", "朝阳区"]})},methods: {changeAddress(arr,code) {console.log(arr,77777777)console.log(code,88888888)},},
};
</script>
  1. 搞定!组件以及示例可直接复制使用!
  2. 另外 省市区JSON数据串 已经放在博客顶部,可自行下载后,自定义组件。

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

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

相关文章

PyQt 如何通过连续点击托盘图标显示隐藏主窗口并且在主窗口隐藏时调整界面到托盘图标附近

不废话直接看代码 # -*- codingutf-8 -*- # # author: Ruben # mail: 773849069qq.com # time: 2023/12/8 # u""" 一个托盘图标的小部件 """ from Qt import QtWidgets, QtGui, QtCore# --*--*--*--*--*--*--*--*--*--…

Alibaba分布式事务组件Seata AT实战

1. 分布式事务简介 1.1 本地事务 大多数场景下&#xff0c;我们的应用都只需要操作单一的数据库&#xff0c;这种情况下的事务称之为本地事务(Local Transaction)。本地事务的ACID特性是数据库直接提供支持。本地事务应用架构如下所示&#xff1a; 在JDBC编程中&#xff0c;我…

【Java面试题】ArrayList和LinkedList有什么区别

这道题考的是数据结构 ArrayList 和 LinkedList 是 java 集合框架中&#xff0c;list 接口下的两个实现类。 以下从三个方面来讲述ArrayList 和 LinkedList 的区别 目录 1. 内部的实现方面 2. 数据访问的时间复杂度不同 3.空间占用方面 1. 内部的实现方面 ArrayList 内…

使用SPSS的McNemar检验两种深度学习模型的差异性

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 使用SPSS的McNemar检验两种深度学习模型的差异性 前言简述&#xff1a;一、McNemar检验1.1来源1.2 两配对样本的McNemar(麦克尼马尔)变化显著性检验1.3 适用范围&#xff1a;…

Unity | Shader基础知识(第二集:shader语言的格式)

目录 一、本节介绍 1 上集回顾 2 本节介绍 二、shader的基本格式 1 SubShader块 2 通道&#xff08;Pass&#xff09; 3 CG语言 4 语义 5 引入 三、下集介绍 一、本节介绍 1 上集回顾 上节课我们学到&#xff0c;空的shader是玫红色的,英文里叫pink&#xff08;我实…

卷积神经网络(含案例代码)

概述 卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;是一类专门用于处理具有网格结构数据的神经网络。它主要被设计用来识别和提取图像中的特征&#xff0c;但在许多其他领域也取得了成功&#xff0c;例如自然语言处理中的文本分类任务。 C…

Nginx快速入门

nginx准备 文本概述参考笔记 狂神&#xff1a;https://www.kuangstudy.com/bbs/1353634800149213186 前端vue打包 参考&#xff1a;https://blog.csdn.net/weixin_44813417/article/details/121329335 打包命令&#xff1a; npm run build:prod nginx 下载 网址&#x…

Java集合--Map

1、Map集合概述 在Java的集合框架中&#xff0c;Map为双列集合&#xff0c;在Map中的元素是成对以<K,V>键值对的形式存在的&#xff0c;通过键可以找对所对应的值。Map接口有许多的实现类&#xff0c;各自都具有不同的性能和用途。常用的Map接口实现类有HashMap、Hashtab…

mysql迁移步骤

MySQL迁移是指将MySQL数据库从一台服务器迁移到另一台服务器。这可能是因为您需要升级服务器、增加存储空间、提高性能或改变数据库架构。 以下是MySQL迁移的一般步骤&#xff1a; 以上是MySQL迁移的一般步骤&#xff0c;具体步骤可能因您的环境和需求而有所不同。在进行迁移之…

uniapp+vue3使用canvas保存海报的使用示例,各种奇奇怪怪的问题解决办法

我们这里这里有一个需求&#xff0c;是将当前页面保存为海报分享给朋友或者保存到本地相册&#xff0c;因为是在小程序端开发的&#xff0c;所以不能使用html2canvas这个库&#xff0c;而且微信官方新推出Snapshot.takeSnapshot这个api还不是很完善&#xff0c;如果你是纯小程序…

如果一个嵌套类需要在单个方法之外仍然是可见,或者它太长,不适合放在方法内部,就应该使用成员类。

当一个嵌套类需要在单个方法之外仍然是可见&#xff0c;或者它太长不适合放在方法内部时&#xff0c;可以考虑使用成员类&#xff08;成员内部类&#xff09;。成员类是声明在类的内部但不是在方法内部的类&#xff0c;可以访问外部类的实例成员。 以下是一个示例&#xff0c;…

【问题处理】—— lombok 的 @Data 大小写区分不敏感

问题描述 今天在项目本地编译的时候&#xff0c;发现有个很奇怪的问题&#xff0c;一直提示某位置找不到符号&#xff0c; 但是实际在Idea中显示确实正常的&#xff0c;一开始以为又是IDEA的故障&#xff0c;所以重启了IDEA&#xff0c;并执行了mvn clean然后重新编译。但是问…

ASF-YOLO开源 | SSFF融合+TPE编码+CPAM注意力,精度提升!

目录 摘要 1 Introduction 2 Related work 2.1 Cell instance segmentation 2.2 Improved YOLO for instance segmentation 3 The proposed ASF-YOLO model 3.1 Overall architecture 3.2 Scale sequence feature fusion module 3.3 Triple feature encoding module …

【Python网络爬虫入门教程3】成为“Spider Man”的第三课:从requests到scrapy、爬取目标网站

Python 网络爬虫入门&#xff1a;Spider man的第三课 写在最前面从requests到scrapy利用scrapy爬取目标网站更多内容 结语 写在最前面 有位粉丝希望学习网络爬虫的实战技巧&#xff0c;想尝试搭建自己的爬虫环境&#xff0c;从网上抓取数据。 前面有写一篇博客分享&#xff0…

【实用技巧】从文件夹内批量筛选指定文件并将其复制到目标文件夹

原创文章&#xff0c;转载请注明出处&#xff01; 从文件夹中批量提取指定文件。 使用DOS命令&#xff0c;根据TXT文件中列出指定文件名&#xff0c;批量实现查找指定文件夹里的文件并复制到新的文件夹。 文中给出使用DOS命令和建立批处理文件两种方法。 文件准备 工作文件…

vite(一)——基本了解和依赖预构建

文章目录 一、什么是构建工具&#xff1f;1.为什么使用构建工具&#xff1f;2.构建工具的作用&#xff1f;3.构建工具怎么用&#xff1f; 二、经典面试题&#xff1a;webpack和vite的区别1.编译方式不同2.基础概念不同3.开发效率不同4.扩展性不同5.应用场景不同6.总结&#xff…

vue 组件实现v-model

ChatgGPT4.0国内站点: 海鲸AI 在Vue中&#xff0c;可以通过使用v-model指令来实现双向数据绑定。如果你想在自定义组件中使用v-model&#xff0c;需要做一些额外的工作。 首先&#xff0c;在组件的props中定义一个名为value的属性&#xff0c;用于接收父组件传递的值。然后&a…

QT- QT-lximagerEidtor图片编辑器

QT- QT-lximagerEidtor图片编辑器 一、演示效果二、关键程序三、下载链接 功能如下&#xff1a; 1、缩放、旋转、翻转和调整图像大小 2、幻灯片 3、缩略图栏&#xff08;左、上或下&#xff09;&#xff1b;不同的缩略图大小 4、Exif数据栏 5、内联图像重命名 6、自定义快捷方式…

MybatisPlus的分页插件

PaginationInnerInterceptor 此插件是核心插件,目前代理了 Executor#query 和 Executor#update 和 StatementHandler#prepare 方法。 在SpringBoot环境中配置方式如下&#xff1a; /*** author giserDev* description 配置分页插件、方言、mapper包扫描等* date 2023-12-13 …

删除一个字符串中的指定字母,如:字符串 “aca“,删除其中的 a 字母。

#include<stdio.h> #include<stdlib.h> #include<string.h> // 删除字符串中指定字母函数 char* deleteCharacters(char * str, char * charSet) { int hash [256]; if(NULL charSet) return str; for(int i 0; i < 256; i) …