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 ...
随机推荐
- javascript如何处理多级的实时监听
今日工作中遇到需求,要求js代码对表单中的input内容进行实时监听,当input中的值改变时触发一些事件. 按照常规思维,代码很快写完了. $(function () { $("#inpu ...
- 久未更 ~ 一之 —— 关于ToolBar
很久没更博客了,索性开一个久未更 系列 > > > > > 久未更 系列一:关于ToolBar的使用(后续补充) //让 ToolBar 单独使用深色主题 使得 tool ...
- 测试left join和where的优先级
--create table tab1--(--id int,--size int--) --create table tab2--(--size int,--name varchar(10)--) ...
- 一键批量打印EXCEL、WORD文档
一键批量打印EXCEL.WORD文档,本方法也可以打印同一个文档N份,可以批量打印A3.A4文档,包括单.双面打印等.希望能帮到广大朋友.请大家注重原创版权,不得在未经许可的下转载.传播,或者用来对同 ...
- xtrabackup全量备份和增(差)量备份
xtrabackup全量备份和增(差)量备份 1.xtrabackup全量备份和恢复 1)备份: innobackupex --default-file=/PATH/TO/DEFAULT --host ...
- mybatis_SQL映射(2)
文章摘录自:http://blog.csdn.net/y172158950/article/details/17258377 1. sql的重用:定义一个sql片段,可在任何SQL语句中重用该片段. ...
- Django之Model组件
Model组件在django基础篇就已经提到过了,本章介绍更多高级部分. 一.回顾 1.定义表(类) ##单表 from django.db import models class user(mode ...
- sqllite小型数据库的使用
1.适用场景:免安装型数据库:数据量不大,本地化管理:不依赖其他第三方类库:2.具体使用方法:添加sqllite类库引用 数据库连接定义,数据库以文件形式存储在sqllitedb/solution.d ...
- 使用mui框架----移动端页面在所有屏幕下自适应
写移动端怎么会不用到框架呢? 现在比较火的是mui.amaze UI 之类的,mui是现在最灵活轻便的一个框架,能够从pc到移动灵活的自适应, 只需要调用他定义的类名就能使用,非常方便,只是需要自己来 ...
- scrapy_Response and Request
scrapy中重要的两个类是什么? Requests.Response 什么是Requests? 网页下载 有哪些参数? url callback headers # 头部信息 cookie ...