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 一 什么是组件 首先给 ...
随机推荐
- MybatisPlus的association 属性及案例
<select id="getMatUnitList" resultMap="matUnitVOMap"> SELECT a.CODE, a.min ...
- 面试官：Session和JWT有什么区别？
Session 和 JWT(JSON Web Token)都是用于在用户和服务器之间建立认证状态的机制,但它们在工作原理.存储方式和安全性等方面存在着一些差异,下面我们一起来看. 1.什么是JWT? ...
- 使用Python插入100万条数据到MySQL数据库并将数据逐步写出到多个Excel
Python插入100万条数据到MySQL数据库 步骤一:导入所需模块和库 首先,我们需要导入 MySQL 连接器模块和 Faker 模块.MySQL 连接器模块用于连接到 MySQL 数据库,而 F ...
- 区块链从入门到放弃系列教程-涵盖密码学,超级账本,以太坊,Libra,比特币等持续更新
目录 简介 什么是区块链 区块链不是什么 区块链的基础:密码学 区块链的基础:分布式系统和共识机制 超级账本Hyperledger 以太坊 Libra 比特币 总结 简介 区块链是一种防篡改的共享数字 ...
- 【开源三方库】Fuse.js：强大、轻巧、零依赖的模糊搜索库
开源项目 OpenHarmony 是每个人的 OpenHarmony 曹天恒 公司:中国科学院软件研究所 小组:知识体系工作组 1.简介 Fuse.js是一款功能强大且轻量级的JavaScript ...
- 二、Unity调用Xcode封装方法
1.开始封装Unity调用接口 我们在Xcode中 写的接口需要在extern "C"中(加上extern "C"后,会指示编译器这部分代码按C语言的进行编译) ...
- SilentEye qsnctf wp
题目附件(注:文件名为Luminous.jpg) 根据题目提示,使用SilentEye工具 将图片使用SilentEye打开 使用左下角的Decode解密功能 猜测密码为文件名,输入并开始解密 将被加 ...
- nginx重新整理——————编译nginx[二]
前言 简单编译一下nginx. 正文 为什么我们要去编译nginx. 系统安装,比如yum安装,会把nginx 模块直接编译进来. 这意味着,我们无法使用第三方的包.如果我们需要使用第三方包,那么需要 ...
- 高云GOWIN下载出现No devices found咋办
在使用GOWIN下载器下载会出现该类问题 No devices found错误. 原因如下: A . Windows10 系统会出现下载器通道顺序错误,所以要确保在 A 通道上. B.有一些 USB ...
- tensorflow如何切换CPU和GPU
import os if Bert_Use_GPU: os.environ['CUDA_VISIBLE_DEVICES'] = '0,1' #使用GPU0,1 else: os.environ['CU ...