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. Entity Framework 6 暂停重试执行策略

    EF6引入一个弹性连接的功能,也就是允许重新尝试执行失败的数据库操作.某些复杂的场景中,可能需要启用或停用重试执行的策略,但是EF框架暂时尚未提供直接的设置开关,将来可能会加入这种配置.幸运的是,很容 ...

  2. Entity Framework异步查询和保存

    EF6开始提供了通过async和await关键字实现异步查询和保存的支持(.net 4.5及更高版本).虽然不是所有的操作都能从异步中获益,但是耗时的操作.网络或IO密集型任务中,使用异步可以提升客户 ...

  3. 云课堂Android模块化实战--如何设计一个通用性的模块

    本文来自 网易云社区 . 如何设计一个通用性的模块 前言 每个开发者都会知道,随着项目的开发,会发现业务在不断壮大,产品线越来越丰富,而留给开发的时间却一直有限,在有限的时间,尽快完成某个功能的迭代. ...

  4. HttpRunnerManager接口自动化测试框架在win环境下搭建教程

    近几日一直在研究如何把接口自动化做的顺畅,目前用的是轻量级jmeter+ant+Jenkins自动化测试框架,目前测试界的主流是python语言,所以一直想用搭建一个基于python的HttpRunn ...

  5. docker安装与基本配置

    Docker有很多种安装的选择,我们推荐您在Ubuntu下面安装,因为docker是在Ubuntu下面开发的,安装包测试比较充分,可以保证软件包的可用性.Mac, windows和其他的一些linux ...

  6. fillna()

    将下面注释掉 fillna() 函数:有一个inplace参数,默认为false,不会对原来dataframe中进行替换,为True时候会修改原来的.

  7. 洛谷P4220 [WC2018]通道(边分治+虚树)

    题面 传送门 题解 代码不就百来行么也不算很长丫 虽然这题随机化贪心就可以过而且速度和正解差不多不过我们还是要好好学正解 前置芝士 边分治 米娜应该都知道点分治是个什么东西,而边分治,顾名思义就是对边 ...

  8. SPOJ 3267 DQUERY(离线+树状数组)

    传送门 话说这好像HH的项链啊…… 然后就说一说上次看到的一位大佬很厉害的办法吧 对于所有$r$相等的询问,需要统计有多少个不同的数,那么对于同一个数字,我们只需要关心它最右边的那一个 比如$1,2, ...

  9. ubuntu和centos 编译安装nginx及常用命令

    转自http://www.cnblogs.com/piscesLoveCc/p/5794926.html 一. ubuntu安装 1. 安装依赖库 安装gcc g++的依赖库 ubuntu平台可以使用 ...

  10. 正则表达式 python

    下面这种方式 从结果上看 匹配的是关键字, 但是不是 每一次都可以 100% 准确 search_words_dict = { "肠炎宁": 0, "维生素AD" ...