vue加载Element ui地址省市区插件-- element-china-area-data
1、安装
npm install element-china-area-data -S
2、使用(引入)
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from ‘element-china-area-data‘
说明:
provinceAndCityData是省市二级联动数据(不带“全部”选项)regionData是省市区三级联动数据(不带“全部”选项)provinceAndCityDataPlus是省市区三级联动数据(带“全部”选项)regionDataPlus是省市区三级联动数据(带“全部”选项)- "全部"选项绑定的value是空字符串
"" CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText['110000']输出北京市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的更多相关文章
- 支持无限加载的js图片画廊插件
natural-gallery-js是一款支持无限加载的js图片画廊插件.该js图片画廊支持图片的懒加载,可以对图片进行搜索,分类,还可以以轮播图的方式来展示和切换图片. 使用方法 在页面中引入下面的 ...
- vue加载优化策略
vue.js是一个比较流行的前端框架,与react.js.angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手.但是单页面应用也都有其弊病,有时候首屏加载慢的让人捏舌 ...
- vue加载本地json文件
背景:做地区跟行业级联下拉选择,因为想做成可以搜索的,所以必须一次加载数据,后台有做memcache缓存,但因为数据量大,还是比较费时间,所以做成本地文件,简单记录一下 准备数据,放到static下 ...
- Vue加载组件、动态加载组件的几种方式
https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-dynamic-async ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- 解决页面初始化vue加载代码问题
<style type="text/css"> /* 解决页面初始化vue加载代码问题 */ [v-cloak] { display: none; } </sty ...
- vue+Element-ui 的 el-cascader 做高德地图的省市区三级联动并且是异步加载,点击省市区跳转到对应的区(地图可以通过后端返回的点进行标点)
// 完整版高德地图,可以复制代码直接使用 index.html <script type="text/javascript" src="https://webap ...
- Vue加载json文件
一.在build/dev-server.js文件里 var app = express() 这句代码后面添加如下(旧版): var appData = require('../address.json ...
- 解决pjax加载页面不执行js插件的问题
个人博客 地址:http://www.wenhaofan.com/article/20180913220425 介绍 在使用jquery.pjax的时候发现加载页面时不会执行其中的layui以及jqu ...
随机推荐
- WebService 常用的设置
1.修改WebService接收长度 <binding name="IAuthServiceSoap11Binding" maxBufferSize="214748 ...
- 结构(struct)
结构是程序员定义的数据类型,非常类似于类.都包含数据成员和函数成员. 区别:1.类是引用类型,而结构是值类型 2.结构是隐式密封的,也就是结构不能被派生. 结构类型和所有值类型一样,含有自己的数据.需 ...
- WebGL 一
WebGL绘制窗口 <html><head><title>OpenGL Test</title> </head><body>&l ...
- Hibernate Update方法提交错误
最近用通用Dao更新对象,报了以下错误 Row was updated or deleted by another transaction (or unsaved-value mapping was ...
- 配合前端开发,调试前端页面bug
同事开发的H5页面 在iOS10.1的手机上会有bug 先下载ios10.1的模拟器,安装到xcode上,注意给电脑腾出足够的空间 https://stackoverflow.com/questio ...
- 整理javascript基础
原始类型值(Primitive values) 下面的全是原始类型值(简称:原始值): 布尔类型:true,false 数字类型:1736,1.351 字符串类型: 'abc',"abc&q ...
- SFML从入门到放弃(1) 窗口和交互
SFML从入门到放弃(1) 窗口和交互 创建一个新窗口: sf::RenderWindow window(sf::VideoMode(,),"new window"); 但是光创建 ...
- 2017qcon大会的一点想法(安全人才如何不被淘汰?)
2017 qcon 上海专门设立了“直击黑产,业务安全的攻与防”专题,通过这次专题的了解和学习,让我对黑产的攻防有了更深入认识. 1. 安全防护趋势 2017 qcon 上海专门设立了“直击黑产,业务 ...
- PL/SQL数据开发那点事
PL/SQL开发那点事----->PL/SQL开发过程中异常处理 用户编写的PL/SQL块在执行过程中不可避免地要发生一些错误. 这里涉及的错误并不是由于程序的语法错误引起的,而是因为处理的数据 ...
- Angular2 内置指令 NgFor 和 NgIf 详解
http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个 ...