1、安装

npm install element-china-area-data -S

2、使用(引入)

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

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

3、具体步骤

https://www.npmjs.com/package/element-china-area-data

转自:https://www.cnblogs.com/eva3288/p/8203028.html

vue加载Element ui地址省市区插件-- element-china-area-data的更多相关文章

  1. 支持无限加载的js图片画廊插件

    natural-gallery-js是一款支持无限加载的js图片画廊插件.该js图片画廊支持图片的懒加载,可以对图片进行搜索,分类,还可以以轮播图的方式来展示和切换图片. 使用方法 在页面中引入下面的 ...

  2. vue加载优化策略

    vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌 ...

  3. vue加载本地json文件

    背景:做地区跟行业级联下拉选择,因为想做成可以搜索的,所以必须一次加载数据,后台有做memcache缓存,但因为数据量大,还是比较费时间,所以做成本地文件,简单记录一下 准备数据,放到static下 ...

  4. Vue加载组件、动态加载组件的几种方式

    https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-dynamic-async ...

  5. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

  6. 解决页面初始化vue加载代码问题

    <style type="text/css"> /* 解决页面初始化vue加载代码问题 */ [v-cloak] { display: none; } </sty ...

  7. vue+Element-ui 的 el-cascader 做高德地图的省市区三级联动并且是异步加载,点击省市区跳转到对应的区(地图可以通过后端返回的点进行标点)

    // 完整版高德地图,可以复制代码直接使用 index.html <script type="text/javascript" src="https://webap ...

  8. Vue加载json文件

    一.在build/dev-server.js文件里 var app = express() 这句代码后面添加如下(旧版): var appData = require('../address.json ...

  9. 解决pjax加载页面不执行js插件的问题

    个人博客 地址:http://www.wenhaofan.com/article/20180913220425 介绍 在使用jquery.pjax的时候发现加载页面时不会执行其中的layui以及jqu ...

随机推荐

  1. ASP.NET Core入门(一)

    大家好,很荣幸您点了开此篇文章,和我一起来学习ASP.NET Core,此篇文字为<ASP.NET Core入门>系列中的第一篇,本系列将以一个博客系统为例,从第一行代码,到系统发布上线( ...

  2. ES6——数据结构 Map

    数据结构 Map 字典: 用来存储不重复key的 Hash结构.不同于集合(Set)的是,字典使用的是 [键,值] 的形式来存储数据的. JavaScript 的对应那个(Object:{}) 只能用 ...

  3. [BZOJ5212][ZJOI2018]历史

    传送门(洛谷) 人生第一道九条可怜……神仙操作…… 看着题解理解了一个早上才勉强看懂怎么回事…… 简化一下题目就是:已知每一个点access的总次数,求一个顺序使虚实边转化的次数最多 考虑一下,对于x ...

  4. jar -- java文档归档工具

    参考文档 http://docs.oracle.com/javase/7/docs/technotes/tools/solaris/jar.html http://blog.chinaunix.net ...

  5. Docker部署常见问题

    一.删除容器和镜像 在删除镜像之前要先用 docker rm 删掉依赖于这个镜像的所有容器(哪怕是已经停止的容器),否则无法删除该镜像. 停止容器 # docker stop $(docker ps ...

  6. CentOS6.9 ARM虚拟机扩容系统磁盘

    由于扩容磁盘的操作非同小可,一旦哪一步出现问题,就会导致分区损坏,数据丢失等一系列严重的问题,因此建议:在进行虚拟机分区扩容之前,一定要备份重要数据文件,并且先在测试机上验证以下步骤,再应用于您的生产 ...

  7. PyQt5(1)——Qt Designer初探

    相关环境配置我们就不介绍了(网上有很多教程) Qt Designer 是一款十分强大的GUI工具,生成的文件为 .UI文件  可以通过命令转化为Py文件,简单来说我们可以通过拖拽方式生成界面,在通过简 ...

  8. POJ2259 Team Queue (JAVA)

    第一次TLE,对每个group重新设置Queue中定位,定位到每个group的最后一个元素,但WA 经过检查,DEQUEUE时没有根据情况重新计算group,插入时没有根据情况重新给last赋值 贴A ...

  9. MPMoviePlayerViewController不能播放本地mp4的解决办法.

    之前一直用MPMoviePlayerViewController进行网络播放,最近下载文件然后本地播放,发现怎么播放都是黑屏.后来发现MPMoviePlayerViewController的本地URL ...

  10. SQL总结-----触发器

    概念 触发器是一种特殊类型的存储过程,不由用户直接调用.创建触发器时会对其进行定义,以便在对特定表或列作特定类型的数据修改时执行. 触发器可以查询其他表,而且可以包含复杂的 SQL 语句. 它们主要用 ...