安装

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. nginx调优操作之nginx隐藏其版本号

    1.nginx下载 下载网址:nginx.org 2.解压nginx [root@iZwz9cl4i8oy1reej7o8pmZ soft]# ls nginx-.tar.gz [root@iZwz9 ...

  2. 深入浅出javascript(四)网页运行原理

    这一篇是根据不同的书本知识归纳的内容,解答的问题是浏览器是如何工作的? 另外,还有一些长篇的内容,写的是浏览器内部如何架构的,这些内容非常复杂艰深,比现在所写的内容又低了一个层级,希望有时间能总结贴出 ...

  3. Nutch1.2 的安装与使用

    Nutch1.2的安装与使用 1.nutch1.2下载    下载地址 http://archive.apache.org/dist/nutch/     2.nutch1.2目录   bin:用于命 ...

  4. [jquery]如何实现页面单块DIV区域滚动展示

    // 未实现功能的代码 1(自己写的代码) var _cur_top = $(window).scrollTop(); var num = $(".class_section"). ...

  5. unigui 设置单元格颜色

    procedure TF_Resource2.UniDBGrid1DrawColumnCell(Sender: TObject; ACol,  ARow: Integer; Column: TUniD ...

  6. LDAP常用属性及其描述

    属性 全名 描述 dn distinguished name 唯一标识名,类似于绝对路径,每个对象都有唯一标识名. 例如:uid=tester,ou=People,dc=example,dc=com ...

  7. Web应用安全之Response Header里的敏感信息

    Web应用安全之Response Header 文/玄魂 目录 Web应用安全之Response Header 前言 1.1  那些敏感的header 1.2 删除敏感的header 1.2.1 删除 ...

  8. 在线安装WordPress更新 失败的解决办法

    1.  登录ftp登录不上 , 总是登录失败 在服务器上新建了一个vsftpd服务器,并设置了相应的虚拟用户,修改chroot到网站目录 相关连接:https://blog.csdn.net/zhan ...

  9. C# 判断access建库、建表、文件是否存在等

    1.创建数据库 2.判断表是否存在 3.创建表 1.    #region access数据库操作 之 创建数据库         private void creatMDB(string dbNam ...

  10. ionic 2.x 3.x input触发调用键盘搜索及事件

    html (1.input  type='search'   2.将input套在一个带action的form中 ) <form action=""> <ion- ...