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 一 什么是组件 首先给 ...
随机推荐
- 软件发布版本号命名风格（GUN）
GUN风格: (1)产品初版时,版本号可以为0.1或0.1.0,也可以为1.0或1.0.0: (2)当产品进行了局部修改或bug修正时,主版本号和子版本号都不变,修正版本号+1: (3)当产品在原有的 ...
- #模型转换#洛谷 6075 [JSOI2015]子集选取
题目 分析 \(n\)个元素可以独立操作,考虑单个元素, 则选不选择一定有一道分界线, 而这条分界线正好要走\(k\)次, 每次可以选择向上走或向右走,所以为\(2^k\), 由于\(n\)个元素相互 ...
- Docker 解决 `denied: requested access to the resource is denied`
背景 由于不可描述的原因,相对于以前,最近在更加频繁的迁移服务器,简单的 Shell 脚本已经不能满足需求了,于是将所有的项目 Docker 化. 部分不含敏感配置的项目准备放到 DockerHub ...
- Java 包和 API 深度解析：组织代码，避免命名冲突
Java 包和 API Java 中的包 用于将相关的类分组在一起.可以将其视为文件目录中的一个文件夹.我们使用包来避免名称冲突,并编写更易于维护的代码. 包分为两类: 内置包(来自 Java API ...
- C# 使用GridControl显示数据库表格 使用VS2017连接Mysql并显示数据库表格
教程引用:https://www.bilibili.com/video/BV1pT4y1u7d2?from=search&seid=10645874367755405718
- MogDB 使用样本数据集Mogila
MogDB 使用样本数据集 Mogila MogDB 提供了一个样本数据集 Mogila,本数据集借鉴了适用于 MySQL 的Sakila 示例数据库.Sakila最初由 MySQL AB 文档团队的 ...
- Swin Transformer安装记录（国内源，飞快）
0. 设备环境 ubuntu--20.10 GPU--3080 cuda--11.0 torch--1.7.0 mmcv--1.3.8 mmdetection--2.11.0 所有的git的项目,都可 ...
- Spring开发：动态代理的艺术与实践
本文分享自华为云社区<Spring高手之路17--动态代理的艺术与实践>,作者: 砖业洋__. 1. 背景 动态代理是一种强大的设计模式,它允许开发者在运行时创建代理对象,用于拦截对真实对 ...
- 顺通鞋服进销存OA管理系统
鞋服进销存OA管理系统通过十几年的积淀与创新,顺通与众多鞋服企业一起共创,形成了涵盖协同办公.移动办公.知识管理.数据运营.多维门户等领域,以鞋服新品研发管理.生产排班管理.门店一体化管理.市场费用管 ...
- 《最新出炉》系列初窥篇-Python+Playwright自动化测试-38-如何截图-下篇
1.简介 这个系列的文章也讲解和分享了差不多三分之一吧,突然有小伙伴或者童鞋们问道playwright有没有截图的方法.答案当然是:肯定有的.宏哥回过头来看看确实这个非常基础的知识点还没有讲解和分享. ...