安装

npm install element-china-area-data -S

使用

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
  1. provinceAndCityData是省市二级联动数据(不带“全部”选项)
  2. regionData是省市区三级联动数据(不带“全部”选项)
  3. provinceAndCityDataPlus是省市区三级联动数据(带“全部”选项)
  4. regionDataPlus是省市区三级联动数据(带“全部”选项)
  5. "全部"选项绑定的value是空字符串""
  6. CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText['110000']输出北京市
  7. TextToCode是个大对象,属性是汉字,属性值是区域码 用法例如:TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105

在需要使用级联页面的js中按需引入就行了,比如:

实例

注:选择完成之后,它最后的值其实是一个区域码,并不是文字,需要自己用CodeToText处理数据,上面有使用说明

官方文档:https://www.npmjs.com/package/element-china-area-data

Element ui级联地址省市区插件的更多相关文章

  1. 基于element UI 的上传插件

    为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...

  2. vue加载Element ui地址省市区插件-- element-china-area-data

    1.安装 npm install element-china-area-data -S 2.使用(引入) import { provinceAndCityData, regionData, provi ...

  3. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  4. 基于element ui的图片预览插件

    写插件很简单,满足两个条件即可,一.基本的逻辑思路,二.熟悉插件语法要求.本次Vue插件也比较简单,点击“查看图片”用轮播的方式限制用户上传的图片,如图: 项目采用的是vue-element-admi ...

  5. element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)

    来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...

  6. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  7. 【Element UI】使用问题记录

    [Element UI]使用问题记录 转载:https://www.cnblogs.com/yangchongxing/p/10750994.html 下载地址: https://unpkg.com/ ...

  8. Vue 基于node npm & vue-cli & element UI创建vue单页应用

    基于node npm & vue-cli & element UI创建vue单页应用 开发环境   Win 10   node-v10.15.3-x64.msi 下载地址: https ...

  9. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

随机推荐

  1. 信息安全技术PGP实验 20155205 20155218

    信息安全技术PGP实验 一.实验过程 PGP的安装与设置(Mac版) 访问GPGTools网站,下载GPG Suite for OS X,下载完毕,双击dmg文件,运行安装操作. 创建PGP密钥(一定 ...

  2. Flash网页小游戏开发教程

    架设服务器 地图 程序员

  3. maven依赖管理

    maven依赖管理 1.依赖范围   (依赖相当于java中的import  是否需要导入别的jar包) 使用控制依赖与三种classpath(编译期,测试时期,运行时期)的关系 complie    ...

  4. sys/time.h 和 time.h

    今天在燕麦工作第二天.看荣哥给我的程序,发现程序里面用的延时跟我以前使用的不同.导入两个头文件,然后用函数来获得时间.关于这个函数特别查来一下. time.h  是ISO C99 标准日期头文件. s ...

  5. spring-aop代理的生效原理

    主要说下spring里aop的生效的原理吧,并不是讲底层的cglib和gdk动态代理. 还是老一套的分析流程,先找到了aop的标签的handler,然后看下在解析这个标签的时候,都干了些什么,其实主要 ...

  6. android Activity中设置setResult 没有触发onActivityResult

    昨天修改<manifest 文件中activity 的 模式为单例模式:android:launchMode="singleTask" ,发现我的onActivityResu ...

  7. kafka groupid

    kafka 分组 简言之,就是相同分组的消费者,会分摊消费kafka中同一个topic中的数据.

  8. AngularJS controller as vm方式

    从AngularJS1.20开始引入了Controller as 新语法,以前版本在Controller 中必须注入$scope这个服务,才能在视图绑定中使用这些变量,$scope不是那么POJO(普 ...

  9. [php-cookie] cookie 请求跨域,如何共享

    cookie 请求跨域的问题, 假设我有两个域名,一个 m.example.com,另一个是 www.example.com . 那么我需要如何设置 cookie 才可以在这两个域名都实现共享呢? / ...

  10. Delphi 内进行音量控制及静音

    unit UMute; interface uses MMSystem, Dialogs; Type   TDeviceName = (Master, Microphone, WaveOut, Syn ...