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 封装 省市区三级的更多相关文章

  1. vue2.0 + Element UI + axios实现表格分页

    注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...

  2. sencha touch在华为emotion ui 2.0自带浏览器中圆角溢出的bug

    在华为emotion ui 2.0自带的浏览器中,给部分组件设置了圆角后会发现背景仍然是方的,内部边框是圆的, 对于这种bug, 只需在对应的设置圆角的css样式中加入 background-clip ...

  3. AFNetworking2.0简易GET,POST请求封装以及使用

    AFNetworking2.0简易GET,POST请求封装以及使用 AFNetworking不用我赘述其强大性,本人仅仅做了非常简易的封装,解决了有时候请求出错的问题,提供源码给大家. 封装源码库下载 ...

  4. c#学习<四>:C#2.0、C#3.0

    委托的演变 委托(C#1.0) 委托可看作是只定义了一个方法的接口,将委托的实例看作实现了这个接口的一个对象. 委托的执行要满足4个条件: 1. 声明委托类型                     ...

  5. Spring MVC 3.0.5+Spring 3.0.5+MyBatis3.0.4全注解实例详解(三)

    前两章我为大家详细介绍了如何搭建Maven环境.Spring MVC的流程结构.Spring MVC与Struts2的区别以及示例中的一些配置文件的分析.在这一章,我就对示例的层次结构进行说明,以及M ...

  6. HTTP协议以及HTTP2.0/1.1/1.0区别

    HTTP协议以及HTTP2.0/1.1/1.0区别 一.简介 摘自百度百科: 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所 ...

  7. 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分开 ...

  8. HTTP协议详解及http1.0与http1.1http2.0的区别

    HTTP协议介绍 http(超文本传输协议)是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.特点: (1)支持客户/服务器模式. HTTP是一个客户端和服务器端请 ...

  9. android 版本更新适配8.0,解决8.0手机无法更新自动安装apk

    随着android 7.0的普及android 8.0的也逐渐流行起来,那么google对权限方面又有了新的修改.而且我发现在android8.0中除了一些bug,比如说:在小米6(Android 8 ...

随机推荐

  1. javascript如何处理多级的实时监听

    今日工作中遇到需求,要求js代码对表单中的input内容进行实时监听,当input中的值改变时触发一些事件. 按照常规思维,代码很快写完了. $(function () { $("#inpu ...

  2. 久未更 ~ 一之 —— 关于ToolBar

    很久没更博客了,索性开一个久未更 系列 > > > > > 久未更 系列一:关于ToolBar的使用(后续补充) //让 ToolBar 单独使用深色主题 使得 tool ...

  3. 测试left join和where的优先级

    --create table tab1--(--id int,--size int--) --create table tab2--(--size int,--name varchar(10)--) ...

  4. 一键批量打印EXCEL、WORD文档

    一键批量打印EXCEL.WORD文档,本方法也可以打印同一个文档N份,可以批量打印A3.A4文档,包括单.双面打印等.希望能帮到广大朋友.请大家注重原创版权,不得在未经许可的下转载.传播,或者用来对同 ...

  5. xtrabackup全量备份和增(差)量备份

    xtrabackup全量备份和增(差)量备份 1.xtrabackup全量备份和恢复 1)备份: innobackupex --default-file=/PATH/TO/DEFAULT --host ...

  6. mybatis_SQL映射(2)

    文章摘录自:http://blog.csdn.net/y172158950/article/details/17258377 1. sql的重用:定义一个sql片段,可在任何SQL语句中重用该片段. ...

  7. Django之Model组件

    Model组件在django基础篇就已经提到过了,本章介绍更多高级部分. 一.回顾 1.定义表(类) ##单表 from django.db import models class user(mode ...

  8. sqllite小型数据库的使用

    1.适用场景:免安装型数据库:数据量不大,本地化管理:不依赖其他第三方类库:2.具体使用方法:添加sqllite类库引用 数据库连接定义,数据库以文件形式存储在sqllitedb/solution.d ...

  9. 使用mui框架----移动端页面在所有屏幕下自适应

    写移动端怎么会不用到框架呢? 现在比较火的是mui.amaze UI 之类的,mui是现在最灵活轻便的一个框架,能够从pc到移动灵活的自适应, 只需要调用他定义的类名就能使用,非常方便,只是需要自己来 ...

  10. scrapy_Response and Request

    scrapy中重要的两个类是什么? Requests.Response 什么是Requests? 网页下载 有哪些参数? url callback headers     # 头部信息 cookie ...