VUE2.0 elemenui-ui 2.0.X 封装 省市区三级
1. 效果图
2. 版本依赖 vue 2.X , elementui 2.0.11 使用element ui <el-form>标签
3. 源码 components/CityList/index
<template>
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="所在地区:">
<el-cascader v-model="form.selectedOptions" :options="CityInfo" @change="handleChange"
:change-on-select="true" :clearable="true"
:filterable="true"></el-cascader>
<!--<span>所选地区:{{ prov }} {{city}} {{area}}</span>-->
</el-form-item>
</el-form>
</template>
<script>
const CityInfo = require('static/city-data.js')
export default {
data() {
return {
CityInfo: CityInfo['default'],
form: {
city: '',
erae: '',
minerae: '',
selectedOptions: []
}
}
},
methods: {
handleChange(value) {
this.form.city = this.form.selectedOptions[0]
this.form.erae = this.form.selectedOptions[1]
this.form.minerae = this.form.selectedOptions[2]
if (this.area) {
this.$emit('sendCityData', { prov: this.prov, city: this.city, area: this.area })
}
}
},
computed: {
prov: function() {
const Prov = this.form.city
for (var y in CityInfo['default']) {
if (CityInfo['default'][y].value === Prov) {
return CityInfo['default'][y].label
}
}
},
city: function() {
const City = this.form.erae
for (var y in CityInfo['default']) {
for (var z in CityInfo['default'][y].children) {
if (CityInfo['default'][y].children[z].value === City && City !== undefined) {
return CityInfo['default'][y].children[z].label
}
}
}
},
area: function() {
const Area = this.form.minerae
for (var y in CityInfo['default']) {
for (var z in CityInfo['default'][y].children) {
for (var i in CityInfo['default'][y].children[z].children) {
if (CityInfo['default'][y].children[z].children[i].value === Area && Area !== undefined) {
return CityInfo['default'][y].children[z].children[i].label
}
}
}
}
}
}
}
</script>
4. 引入 调用
<template>
<div>
<h2>当前从组件传递过来的省市数据:</h2>
<p>{{CityList}}</p>
<city-list @sendCityData="getCity"></city-list>
</div>
</template>
<script>
import CityList from '@/components/CityList/index.vue'
export default {
components: { CityList },
data() {
return {
CityList: ''
}
},
methods: {
getCity(cityList) {
this.CityList = cityList
}
}
}
</script>
5. git地址 https://github.com/IceGogh/vue-components
VUE2.0 elemenui-ui 2.0.X 封装 省市区三级的更多相关文章
- vue2.0 + Element UI + axios实现表格分页
注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...
- sencha touch在华为emotion ui 2.0自带浏览器中圆角溢出的bug
在华为emotion ui 2.0自带的浏览器中,给部分组件设置了圆角后会发现背景仍然是方的,内部边框是圆的, 对于这种bug, 只需在对应的设置圆角的css样式中加入 background-clip ...
- AFNetworking2.0简易GET,POST请求封装以及使用
AFNetworking2.0简易GET,POST请求封装以及使用 AFNetworking不用我赘述其强大性,本人仅仅做了非常简易的封装,解决了有时候请求出错的问题,提供源码给大家. 封装源码库下载 ...
- c#学习<四>:C#2.0、C#3.0
委托的演变 委托(C#1.0) 委托可看作是只定义了一个方法的接口,将委托的实例看作实现了这个接口的一个对象. 委托的执行要满足4个条件: 1. 声明委托类型 ...
- Spring MVC 3.0.5+Spring 3.0.5+MyBatis3.0.4全注解实例详解(三)
前两章我为大家详细介绍了如何搭建Maven环境.Spring MVC的流程结构.Spring MVC与Struts2的区别以及示例中的一些配置文件的分析.在这一章,我就对示例的层次结构进行说明,以及M ...
- HTTP协议以及HTTP2.0/1.1/1.0区别
HTTP协议以及HTTP2.0/1.1/1.0区别 一.简介 摘自百度百科: 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所 ...
- ASP.NET Core 共享第三方依赖库部署的Bug(*.deps.json on 2.2.0 or 4.6.0 版本)
背景: I try to put the Microsoft.*.dll and System.*.dll togather to a new folder.以便把(第三方或)系统的和应用的dll分开 ...
- HTTP协议详解及http1.0与http1.1http2.0的区别
HTTP协议介绍 http(超文本传输协议)是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.特点: (1)支持客户/服务器模式. HTTP是一个客户端和服务器端请 ...
- android 版本更新适配8.0,解决8.0手机无法更新自动安装apk
随着android 7.0的普及android 8.0的也逐渐流行起来,那么google对权限方面又有了新的修改.而且我发现在android8.0中除了一些bug,比如说:在小米6(Android 8 ...
随机推荐
- Django REST framework 中 3 种类视图的对比
相较于使用基于方法(function based)的视图,我们更加倾向使用基于类(class based)的视图.接下来,你将看到这是一个强大的模式,是我们能够重用公共的功能,并且,帮我们减少重复的造 ...
- 【android studio】 gradle配置成本地离线zip包
http://blog.csdn.net/jingleye/article/details/52689260 关键词:distributionUrl修改成本地路径,android stud ...
- 《图解http》知识点笔记
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Helvetica } p.p2 { margin: 0.0px 0.0px 0.0px 0. ...
- Linux系统上安装JDK和Tomcat服务器
一.安装JDK 1.查看当前Linux系统是否已经安装java 输入命令: rpm -qa | grep java 2.卸载两个openJDK 输入命令:rpm -e --nodeps 3.上传j ...
- 性能测试资源监控工具nmon使用方法
1.简述 nmon是一种在AIX与各种Linux操作系统上广泛使用的监控与分析工具,相对于其它一些系统资源监控工具来说,nmon所记录的信息是比较全面的,它能在系统运行过程中实时地捕捉系统资源的使用 ...
- xshell 与 putty
http://blog.csdn.net/efine_dxq/article/details/54599184 一.Xshell 与 putty概念 Xshell是一个强大的安全终端模拟软件,它支持S ...
- 如何查看sublime安装了哪些插件
你应该安装过package control. 那么只要这样:按ctrl+shift+p,输入package,选择list packages,就看到了. 或者直接查看Installed Packages ...
- javascript alert乱码的解决方法
http://www.jb51.net/article/42805.htm 提示时中文乱码,拼音什么的都没有问题呀,下面我在论坛找到一解决办法,下面与大家分享. 解决办法一: 复制代码 代码如下: e ...
- ZooKeeper集群的安装、配置、高可用测试
Dubbo注册中心集群Zookeeper-3.4.6 Dubbo建议使用Zookeeper作为服务的注册中心. Zookeeper集群中只要有过半的节点是正常的情况下,那么整个集群对外就是可用的.正是 ...
- struts配置json需要的jar包