Element ui级联地址省市区插件
安装
npm install element-china-area-data -S
使用
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
provinceAndCityData
是省市二级联动数据(不带“全部”选项)regionData
是省市区三级联动数据(不带“全部”选项)provinceAndCityDataPlus
是省市区三级联动数据(带“全部”选项)regionDataPlus
是省市区三级联动数据(带“全部”选项)- "全部"选项绑定的value是空字符串
""
CodeToText
是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText['110000']
输出北京市
TextToCode
是个大对象,属性是汉字,属性值是区域码 用法例如:TextToCode['北京市'].code
输出110000
,TextToCode['北京市']['市辖区'].code
输出110100
,TextToCode['北京市']['市辖区']['朝阳区'].code
输出110105
在需要使用级联页面的js中按需引入就行了,比如:
实例
注:选择完成之后,它最后的值其实是一个区域码,并不是文字,需要自己用CodeToText处理数据,上面有使用说明
官方文档:https://www.npmjs.com/package/element-china-area-data
Element ui级联地址省市区插件的更多相关文章
- 基于element UI 的上传插件
为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...
- vue加载Element ui地址省市区插件-- element-china-area-data
1.安装 npm install element-china-area-data -S 2.使用(引入) import { provinceAndCityData, regionData, provi ...
- 基于 vue+element ui 的cdn网站(多页面,都是各种demo)
前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...
- 基于element ui的图片预览插件
写插件很简单,满足两个条件即可,一.基本的逻辑思路,二.熟悉插件语法要求.本次Vue插件也比较简单,点击“查看图片”用轮播的方式限制用户上传的图片,如图: 项目采用的是vue-element-admi ...
- element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)
来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- 【Element UI】使用问题记录
[Element UI]使用问题记录 转载:https://www.cnblogs.com/yangchongxing/p/10750994.html 下载地址: https://unpkg.com/ ...
- Vue 基于node npm & vue-cli & element UI创建vue单页应用
基于node npm & vue-cli & element UI创建vue单页应用 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https ...
- vue开源Element UI表单设计及代码生成器
在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...
随机推荐
- ArcGIS的地理坐标系与大地坐标系
一直以来,总有很多朋友针对地理坐标系.大地坐标系这两个概念吃不透.近日,在网上看到一篇文章介绍它们,非常喜欢.所以在此转发一下,希望能够对制图的朋友们有所帮助. 地理坐标:为球面坐标. 参考平面地是 ...
- Ng第十三课:聚类(Clustering)
13.1 无监督学习:简介 13.2 K-均值算法 13.3 优化目标 13.4 随机初始化 13.5 选择聚类数 13.1 无监督学习:简介 在这个视频中,将开始介绍聚类算法.这将是一个激 ...
- Swift: 用Alamofire做http请求,用ObjectMapper解析JSON
跟不上时代的人突然间走在了时代的前列,果然有别样的风景.首先鄙视一下AFNetworking.这个东西实在太难用了.不想封装都不行,要不写一大堆代码. NSURL *URL = [NSURL URLW ...
- 创建私有maven服务器
私服的创建 1.下载nexus服务 nexus-2.12.0-01-bundle https://pan.baidu.com/s/1o8OfieI 2.下载maven工具 apache-mave ...
- (记忆化搜索)数塔 (zznu 1271)
http://acm.zznu.edu.cn/problem.php?id=1271 1271: 数塔 时间限制: 1 Sec 内存限制: 128 MB提交: 109 解决: 78[提交][状态] ...
- 【python-excel】Selenium+python自动化之读取Excel数据(xlrd)
Selenium2+python自动化之读取Excel数据(xlrd) 转载地址:http://www.cnblogs.com/lingzeng86/p/6793398.html ·········· ...
- MySQL性能优化之延迟关联
[背景] 某业务数据库load 报警异常,cpu usr 达到30-40 ,居高不下.使用工具查看数据库正在执行的sql ,排在前面的大部分是: SELECT id, cu_id, name, in ...
- Linqpad工具
下载地址: http://www.linqpad.net/ 可以通过连接数据库,直接测试LINQ语句,并可以转化为Lamda .SQL语句. 非常好用的小工具,记录一下.
- hdu 5092 线裁剪(纵向连线最小和+输出路径)
http://acm.hdu.edu.cn/showproblem.php?pid=5092 给一个m*n的矩阵,找到一个纵向的"线"使得线上的和最小并输出这条线,线能向8个方向延 ...
- Android-Kotlin-代理和委托
代理和委托,在生活中的案例有很多: 例如:小明工作很忙,需要办理银行卡,此时他委托给>>小李去给自己办理银行卡,小李来到办理中心 把自己的身份证/小李的身份证,给办理人员,说是小明委托我, ...