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 一 什么是组件 首先给 ...
随机推荐
- 容器镜像加速指南：探索 Kubernetes 缓存最佳实践
介绍 将容器化应用程序部署到 Kubernetes 集群时,由于从 registry 中提取必要的容器镜像需要时间,因此可能会出现延迟.在应用程序需要横向扩展或处理高速实时数据的情况下,这种延迟尤其容 ...
- 痞子衡嵌入式：给i.MXRT1xxx系列GPIO提早供电会影响DCDC_PSWITCH上电时序导致内部DCDC启动失败
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是给i.MXRT1xxx系列GPIO提早供电会影响DCDC_PSWITCH上电时序导致内部DCDC启动失败. 最近有一个 RW612 产品 ...
- 揭秘镭速传输点对点传输技术，NAT+Raysync强强组合
点对点传输是一种文件即时传输方式用于实现数据的快速联动,为所有客户端提供资源,包括带宽.存储空间.计算能力.点对点传输技术有很多应用,包括共享各种格式音频.视频.数据等. 在5G重新定义带宽,信息技术 ...
- PyCharm字体大小快捷键设置（“ctrl+滚轮”实现字体的随时放大和缩小）
前言:我们在使用PyCharm工具编写Python代码的时候,希望能够随时放大缩小字体,而PyCharm默认是没有设置快捷键的,我们可以自己设置,下面就教大家如何设置. 分为两步设置: PyCharm ...
- 第一个hello驱动
Linux驱动程序的分类 字符设备驱动.块设备驱动和网络设备驱动. Linux驱动程序运行方式 把驱动程序编译进内核里面,这样内核启动后就会自动运行驱动程序了: 把驱动程序编译成以.ko为后缀的模块文 ...
- #差分约束系统#CodeChef Digit Matrix&洛谷 7515 [省选联考 2021 A 卷] 矩阵游戏
洛谷传送门 DGMATRIX 分析 先任意构造出一个不一定满足值域的矩阵,现在只需要满足值域就可以了. 可以发现,给一行或一列依次加一减一2*2矩阵的和仍然不变,并且如果有解一定能构造出一组方案. 因 ...
- #zkw线段树，扫描线，dp，离散#NOIP2020.9.26模拟speike
分析 由于可以走边界,那么最短路径一定按横坐标递增并且经过矩形的顶点, 考虑扫描线,找到当前线段(矩形右边界可以忽略)两个端点离的最近而又可达的线段, dp一下并用线段树维护就可以了 代码 #incl ...
- 如何监控容器或K8s中的OpenSearch
概述 当前 OpenSearch 使用的越来越多, 但是 OpenSearch 生态还不尽完善. 针对如下情况: 监控容器化或运行在 K8s 中的 OpenSearch 我查了下, 官方还没有提供完备 ...
- cv.calibrateCamera
相机造成的失真类型 如何找到相机的内在和外在特性 如何基于这些特性来消除图像失真 基础 一些针孔相机会对图像造成严重失真.两种主要的畸变是径向畸变和切向畸变. 径向变形会使直线看起来是弯曲的.点离图像 ...
- 电脑开机时报错No Bootable Device找不到索引的解决方法
本文介绍笔记本电脑出现No Bootable Device错误提示,且无法开机的多种解决办法. 1 问题产生 最近,笔记本电脑正在正常使用时,突然蓝屏,出现你的设备遇到问题,需要重启.的提示: ...