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 一 什么是组件 首先给 ...
随机推荐
- 散列表的数据结构以及对象在JVM堆中的存储过程
[版权声明]未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) https://blog.csdn.net/m0_69908381/article/details/129916399 出自[进步* ...
- C# OpenCvSharp MatchTemplate 多目标匹配
效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.D ...
- BeanUtils.copyProperties() 详解
BeanUtils.copyProperties会进行类型转换:BeanUtils.copyProperties方法简单来说就是将两个字段相同的对象进行属性值的复制. 如果 两个对象之间存在名称不相同 ...
- #K-D Tree#洛谷 2093 [国家集训队]JZPFAR
题目 平面上有 \(n\) 个点.现在有 \(m\) 次询问,每次给定一个点 \((px, py)\) 和一个整数 \(k\), 输出 \(n\) 个点中离 \((px, py)\) 的距离第 \(k ...
- Arm架构下麒麟操作系统安装配置Mariadb数据库
1.安装配置JDK (1)检查机器是否已安装JDK 执行 java -version命令查看机器是否安装JDK,一般麒麟操作系统默认安装openjdk 1.8. (2)安装指定版本JDK 如果麒麟操作 ...
- 一文读懂java中的Reference和引用类型
目录 简介 强引用Strong Reference 软引用Soft Reference 弱引用weak Reference 虚引用PhantomReference Reference和Referenc ...
- el-table设置列属性fixed导致滚动条无法拖动-骨灰级
一.前言说明 网上一搜索,千篇一律的设置el-table__fixed,如: .el-table__fixed { // 左固定列 height: auto !important; bottom: 1 ...
- OpenHarmony 3.2 Beta多媒体系列——音视频播放gstreamer
一. 简介 多媒体播放框架主要的实现在PlayerServer服务中,这个服务提供了媒体播放框架所需要的实现环境,继续跟踪代码分析发现,PlayerServer主要通过gstreamer适配层,对 ...
- Python - 字典2
Python - 访问字典项 您可以通过在方括号内引用其键名来访问字典的项: 示例,获取 "model" 键的值: thisdict = { "brand": ...
- synchronized解锁源码分析
上篇花了很大篇幅写了synchronized的加锁流程,并对比了ReentrantLock的设计,这篇我们收个尾,来聊一聊解锁流程,本来准备一章解决的,写着写着觉得内容过多,其实上一篇和Reentra ...