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.rhkb.cn/news/217430.html

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

相关文章

Hudi 在 vivo 湖仓一体的落地实践

作者&#xff1a;vivo 互联网大数据团队 - Xu Yu 在增效降本的大背景下&#xff0c;vivo大数据基础团队引入Hudi组件为公司业务部门湖仓加速的场景进行赋能。主要应用在流批同源、实时链路优化及宽表拼接等业务场景。 一、Hudi 基础能力及相关概念介绍 1.1 流批同源能力 与H…

Yum仓库架构解析与搭建实践

1.Yum仓库搭建 1.1本地Yum仓库图解 1.2Linux本地仓库搭建 配置本地光盘镜像仓库 1&#xff09;挂载 [roothadoop101 ~]# mount -t iso996 /dev/cdrom/mnt 2&#xff09;查看 [rooothadoop101 ~] # df -h | |grep -i mnt /dev/sr0 4.6G 4.4G 3&#xf…

python学习1

大家好&#xff0c;这里是七七&#xff0c;今天开始又新开一个专栏&#xff0c;Python学习。这次思考了些许&#xff0c;准备用例子来学习&#xff0c;而不是只通过一大堆道理和书本来学习了。啊对&#xff0c;这次是从0开始学习&#xff0c;因此大佬不用看本文了&#xff0c;小…

103基于matlab的极限学习机(ELM)和改进的YELM和集成极限学习机(EELM)是现在流行的超强学习机

基于matlab的极限学习机&#xff08;ELM&#xff09;和改进的YELM和集成极限学习机(EELM)是现在流行的超强学习机&#xff0c;该程序是三者的方法比对。 包括学习时间&#xff0c;训练精度和测试精度的对比。数据可更换自己 的&#xff0c;程序已调通&#xff0c;可直接运行…

Nginx+Tomcat实现负载均衡和动静分离

目录 前瞻 动静分离和负载均衡原理 实现方法 实验&#xff08;七层代理&#xff09; 部署Nginx负载均衡服务器(192.168.75.50:80) 部署第一台Tomcat应用服务器&#xff08;192.168.75.60:8080&#xff09; 多实例部署第二台Tomcat应用服务器&#xff08;192.168.75.70:80…

Django和ECharts异步请求示例

前提条件 创建django项目&#xff0c;安装配置过程这里就不讲述了。 后端url http://127.0.0.1:8000/echarts/demo/ view视图函数 from django.http import HttpResponse import jsondef EchartsDemo(request):data {}categories ["衬衫","羊毛衫",&…

初识数据结构

文章目录 一、什么是数据结构&#xff1f;二、什么是算法&#xff1f;三、数据结构和算法的重要性在校园招聘的笔试中在校园招聘的面试中某学长CVTE面试&#xff1a;某学长腾讯的面试&#xff1a;某学姐百度的面试&#xff1a; 在未来的工作中 四、如何学好数据结构和算法1.死磕…

亚马逊云科技 re:Invent 大会 - ElastiCache Serverless模式来袭

亚马逊云科技 re:Invent 大会 - ElastiCache Serverless模式来袭 本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 亚马逊云科技开发者社区, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道。 文章目录 亚马逊云…

JAVA:深入探讨Map的多种遍历方式

1、简述 在现代编程中&#xff0c;Map&#xff08;映射&#xff09;是一种常见的数据结构&#xff0c;用于存储键-值对。在许多编程语言中&#xff0c;Map提供了灵活的数据组织方式&#xff0c;但为了充分发挥其功能&#xff0c;我们需要了解多种遍历方式。本文将深入探讨Map的…

在接口实现类中,加不加@Override的区别

最近的软件构造实验经常需要设计接口&#xff0c;我们知道Override注解是告诉编译器&#xff0c;下面的方法是重写父类的方法&#xff0c;那么单纯实现接口的方法需不需要加Override呢&#xff1f; 定义一个类实现接口&#xff0c;使用idea时&#xff0c;声明implements之后会…

【普中】基于51单片机简易计算器显示设计( proteus仿真+程序+设计报告+实物演示+讲解视频)

目录标题 &#x1f4df;1. 主要功能&#xff1a;&#x1f4df;2. 讲解视频&#xff1a;&#x1f4df;3. 设计说明书(报告)&#x1f4df;4. 仿真&#x1f4df;5. 实物烧录和现象&#x1f4df;6. 程序代码&#x1f4df;7. 设计资料内容清单 【普中开发板】基于51单片机简易计算器…

iPhone 16 的电池供应可能来自印度

据英国《金融时报》报道&#xff0c;据报道&#xff0c;苹果已通知其供应链&#xff0c;包括中国德赛公司和台湾新普科技等电池供应商&#xff0c;其倾向于将 iPhone 16 的电池供应转移到印度。苹果鼓励供应商将现有产能迁往印度&#xff0c;以扩大该地区的生产规模。 鉴于电池…

使用qt实现四则运算计算机项目

这是我们要包含的头文件 #include <QWidget> #include<QStack> #include<string.h> #include<string> 这是我在ui界面创建的计算机基础框架。 接下来要实现按住每个按钮在白框内显示&#xff1b; 因此我们要定义一个QString 类型的变量 QString e…

Electron 跨平台打包

最近利用 Electron 制作跨平台安装包&#xff0c;记录步骤&#xff0c;踩坑多多。 首先&#xff0c;一步步搭建项目 一、搭建环境 初始化 package.json&#xff0c;这里要求 node 版本不低于14.16&#xff0c;我用的 v14.16.0&#xff0c;16版本在 Linux 下容易出现安装依赖…

C++入门(浅谈类和对象)

1 命名空间 1-1命名空间的定义 定义命名空间的目的是为了不与标识符的名称进行冲突&#xff0c;命名空间中可以定义函数&#xff0c;变量&#xff0c;类型。 比如&#xff1a;这里的rand和strlens其实是函数&#xff0c;在命名空间中可以避免与全局作用域中的rand函数和strlen…

【PgSQL】导出表结构为EXCEL

详细SQL语句&#xff1a; C.relname ‘你的表名’ 直接输入表面即可 PgSQL 打印表结构语句 SELECT C.relname AS "表名",CAST(obj_description(C.oid, pg_class) AS VARCHAR) AS "表名描述",A.attname AS "字段名",CASE WHEN A.attnotnull f …

ArcGIS导入excel中的经纬度信息,绘制矢量

1.首先整理坐标信息 2.其次转成2003格式的excel文件 3.导入arcgis&#xff0c;点击右键添加excel数据 4.显示xy数据 5.显示经度和纬度信息 6&#xff1a;点击【地理坐标系】->【World】->【WGS 1984】->【确定】 7.投影带的确定方式&#xff1a; 因为自己一直…

智慧城市/一网统管建设:人员危险行为检测算法,为城市安全保驾护航

随着人们压力的不断增加&#xff0c;经常会看见在日常生活中由于小摩擦造成的大事故。如何在事故发生时进行及时告警&#xff0c;又如何在事故发生后进行证据搜索与事件溯源&#xff1f;旭帆科技智能视频监控人员危险行为/事件检测算法可以给出答案。 全程监控&#xff0c;有源…

hive聚合函数之排序

1 全局排序&#xff08;Order By&#xff09; Order By&#xff1a;全局排序&#xff0c;只有一个Reduce。 (1&#xff09;.使用Order By子句排序 asc&#xff08;ascend&#xff09;&#xff1a;升序&#xff08;默认&#xff09; desc&#xff08;descend&#xff09;&#…

汽车清除积碳和清洗节气门

汽车清除积碳和清洗节气门 汽车需要清除积碳的部位检查积碳方法&#xff1a; 清除积碳和清洗节气门风险&#xff1a;燃油宝 第一次清除积碳1万公里2万公里3万公里--5万公里6万公里以上 汽车需要清除积碳的部位 节气门喷油嘴进气道燃烧室 检查积碳方法&#xff1a; 建议每3到5…