1、安装

  1. npm install element-china-area-data -S

2、使用(引入)

  1. 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. Windows上编译libpng

    下载libpng 1.5.10并解压到[工作目录]/png/libpng-1.5.10 用CMake选择png/libpng-1.5.10目录并Configure: CMAKE_C_FLAGS_DEB ...

  2. APIO2012 派遣dispatching | 左偏树

    题目链接:戳我 就是尽可能地选取排名小的,加起来就可以了.然后我们考虑利用一个大根堆,一个一个合并,如果超过派遣的钱,我们就把费用最大的那个忍者丢出队列. 左偏树,作为一个十分优秀的可并堆,我们这道题 ...

  3. eclipse问题 - windows版

    问题:java compiler level does not match the version of the installed java project facet:但是项目仍能运行 解释:项目 ...

  4. OCP认证052新加的考试题及答案整理-21

    21.Which two are true about roles? A) A role can be password-protected. B) A role can be granted to ...

  5. [Objective-C语言教程]开发环境设置(2)

    如果要安装自己的Objective-C编程语言编程环境,则需要在计算机上安装文本编辑器和GCC编译器. 1. 文本编辑器 文本编辑器用于编写程序代码.一些常见的编辑器如:Windows Notepad ...

  6. 看完MJ讲解的单例后的个人总结

    1.单例的介绍 单例是iOS常用的开发模式的一种. 2.什么是单例 单例就是一个类只创建一个对象,只分配一次内存空间. 3.单例的应用场景 1)系统的单例:  [UIApplication share ...

  7. Hibernate 使用log4j日志记录

    日志记录使程序员能够将日志详细信息永久写入文件.这是我们以后在开发当中非常重要的一步. Hibernate使用log4j日志记录,我们需要以下几个步骤: 1.导入jar包: (1)这是hibernat ...

  8. 做point data的切面的时候的注意事项

    正确的顺序应该是: 先导入cell data,再转换为point data,再做切面.结果如下: 如果这里导入cell data以后先做了切面再转换为point data,结果就是这样的: 很明显中间 ...

  9. L2-2 小字辈 (25 分)

    本题给定一个庞大家族的家谱,要请你给出最小一辈的名单. 输入格式: 输入在第一行给出家族人口总数 N(不超过 100 000 的正整数) —— 简单起见,我们把家族成员从 1 到 N 编号.随后第二行 ...

  10. Python下使用 redis数据库

    初识Rdeis数据库 简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zs ...