vue全国省市选择vue组件
没用懂checkbox，干脆自己定义布尔值，方便数据页面响应。
可以再原始省市数据 下载address.js文件
1.初始化数据格式：
2页面样式：
3.对应输出的数据格式：
4.源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>省市任意选组件vue</title>
<style>
/* 数据多的时候v-cloak的妙用，一定要将样式加载在高级 */
[v-cloak]{
display: none!important;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" v-cloak>
<div class="tableArea">
<div class="pro" v-for='(item,index) in areasList' :key='index'
@mouseover="mouseover(index,item)"
@mouseleave="mouseleave(index,item)">
<label class="provinces" @click='clicks(item)'>
<span :class='{selected:item.IsCheckeds}'></span>{{item.province}}({{item.citys.length}})
</label>
<div class="citys" v-show='item.show'>
<p>{{item.province}}</p>
<label class="city" v-for='(i,s) in item.citys' :key='s' @click='click(item,s)'>
<span :class='{selected:i.IsChecked}'></span>{{i.city}}
</label>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="./address.js"></script>
<script>
new Vue({
el: '#app',
data(){
return{
show:false,
areasList:{},
data:[]
}
},
created:function(){
let areasList = []
for(item in areas){
let citys = []
let objs = {
province:item,
citys:item.indexOf("市") != -1?'':citys,
show:false,
IsCheckeds:false
}
for(i in areas[item]){
let obj = {
city:areas[item][i],
IsChecked:false
}
citys.push(obj)
}
areasList.push(objs)
}
this.areasList = areasList
console.log(areasList) //处理省市数据类型
},
methods:{
// 当前默认直辖市无下级选择，无弹窗
mouseover(index,item){
if(item.citys.length>0){
item.show = true
}
},
mouseleave(index,item){
if(item.citys.length>0){
item.show = false
}
},
// 点击省级按钮时，对应所以子市级状态响应
clicks(item){
item.IsCheckeds = !item.IsCheckeds
if(item.citys){
item.citys.forEach(element => {
element.IsChecked = item.IsCheckeds
});
}
this.Statistics()
},
//点击市级按钮时，改变数量时，对应的省的状态与其响应
click(item,s){
let citys = item.citys[s]
citys.IsChecked = !citys.IsChecked
let arr_filter = item.citys.filter(function(element,index,self){
return element.IsChecked==true; // 返回市级已选的数组
})
if(arr_filter.length==0){
item.IsCheckeds = false
}else{
item.IsCheckeds = true
}
this.Statistics()
},
// 每次状态的额改变触发方法统计当前已选状态
Statistics(){
let areasList = this.areasList
let arrData = []
areasList.forEach(element => {
if(element.IsCheckeds){
if(element.citys){
let citys = element.citys
citys.forEach( e => {
if(e.IsChecked){
let obj = { //每一条市级数据都作为一个单独的对象
province:element.province,
city:e.city,
}
arrData.push(obj)
}
});
}else{
let obj = { //直辖市级数据也作为一个单独的对象
province:element.province,
city:element.province,
}
arrData.push(obj)
}
}
});
console.log(arrData) //当前已选
}
}
})
</script>
</html>
<style>
.clear{
clear:both
}
.tableArea{
width: 800px;
font-size: 15px;
color: #606266;
}
.tableArea .pro, .tableArea .city{
float: left;
margin: 6px 16px;
}
label{
line-height: 32px;
}
label span{
width: 10px;
height: 10px;
background: #ececec;
display: inline-block;
border-radius: 3px;
border:1px solid #c1bfbf
}
.selected{
background: #409EFF;
}
.tableArea .pro{
position: relative;
}
.citys{
overflow: hidden;
border: 1px solid #ececec;
position: absolute;
left: 0;
width: 600px;
z-index: 1;
border-radius: 4px;
color: #606266;
background: #ffffff;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.citys p{
text-indent: 15px;
color: black;
}
</style>
vue全国省市选择vue组件的更多相关文章
- 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]
原文:http://blog.csdn.net/sinat_17775997/article/details/58585142 之前用Vue做了一个基础的组件 vue-img-inputer ,下面就 ...
- vue自定义可输入的选择框组件
vue自定义可输入的选择框组件 props: 属性 说明 类型 默认值 selectDataList 下拉框中的内容 Array 空数组([]) value 输入框中的内容 String 空字符串(& ...
- React 还是 Vue: 你应该选择哪一个Web前端框架？
学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue 如果你喜欢简单和“能用就行”的东西 ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- 【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）
Vue 资源典藏,包括:UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
- python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- day 83 Vue学习三之vue组件
本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...
- vue 阿里云上传组件
vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储 测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云o ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- day 82 Vue学习三之vue组件
Vue学习三之vue组件 本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
随机推荐
- java通过jsch使用sftp连接linux处理文件
1.Maven依赖 <!--Java连接Linux服务器依赖--> <dependency> <groupId>com.jcraft</groupId> ...
- Kingbase ES 自定义聚合函数和一次改写案例
文章概要: KES的SQL的语法暂时不兼容oracle的自定义聚合函数的创建语法和流程,但是可以使用KES已支持的语法改写. 本文整理和简单解析了自定义聚合函数的原理和解读了范例代码. 并根据客户代码 ...
- KingbaseES V8R6备份恢复案例之---备份crond计划任务的调整
案例说明: 在KingbaseES V8R6数据库通常备份建立的crond任务,默认由root用户建立,写入到/etc/cron.d/KINGBASECRON文件中,在有的生产环境限制了普通用户使用r ...
- PostgreSQL 函数稳定性在索引与全表访问下的性能差异
一.构建测试数据 create or replace function test_volatile(id integer) returns bigint volatile language sql a ...
- 谈谈 OI 中的查重
鉴于最近洛谷的公开赛出现的重题引起的纠纷,我打算整理一下此类问题的危害和做法. 也许有时候无意的重题不会被处罚,但我想也应该尽量避免来换取选手的更好体验. Part 0 什么是重题 原题大致可分为完全 ...
- Java封装xml格式参数请求第三方接口
Java封装xml格式参数请求第三方接口 1.引用包 import javax.xml.parsers.DocumentBuilderFactory; import javax.xml.parsers ...
- 文档贡献与写作必读-OpenHarmony开发者文档风格指南
在您使用OpenHarmony文档或参与OpenHarmony文档/生态内容贡献时,是否遇到过如下问题: ● 应该使用第一人称还是第二人称来写作? ● Markdown文件应该如何命名? ● 代码块及 ...
- Java ArrayList 与 LinkedList 的灵活选择
Java ArrayList Java ArrayList 类是一个可变大小的数组,位于 java.util 包中. 创建 ArrayList import java.util.ArrayList; ...
- Java 枚举（Enums）解析：提高代码可读性与易维护性
接口 在 Java 中,实现抽象的另一种方式是使用接口. 接口定义 接口是一个完全抽象的类,用于将具有空方法体的相关方法分组: // 接口 interface Animal { public void ...
- CSS 布局专题
0x01 浮动布局 (1)常见网页布局 顶部商标栏(Logo):展示网站的标志.名称以及具有代表性的图片 导航栏(Navigation):展示网站大概的分类 左侧边栏(Left-side Bar):展 ...