Vue自定义省市区三级联动
作者：面壁思过程
这篇文章主要为大家详细介绍了Vue自定义省市区三级联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue自定义省市区三级联动的具体代码，供大家参考，具体内容如下
1.如图（省市区加上全部联动）
第一步:找到了一个普通的省市区先进行遍历更改
2.把更改后的json文件放入vue项目中引入到你想要的页面
3.剩余代码如下
<template>
<div class="percentloop">
<!-- 地区选择 -->
<section class="section">
<p class="tittle">
<span class="important_font">*</span>
<span>地区筛选</span>
</p>
<div class="box">
<div class="area">
<!-- 省 -->
<li class="area-menu province-list">
<div class="area-msg" @click.stop="show(0)">
{{areaList[province].provinceName}}
</div>
<ul v-show="showindex[0]">
<li v-for="(item,index) in areaList" :key="index"
@click.stop="selprovinceName(index,item.provinceName)">
{{item.provinceName}}
</li>
</ul>
</li>
<span class="text">省</span>
<!-- 市 -->
<li class="area-menu city-list">
<div class="area-msg" @click.stop="show(1)">
{{areaList[province].areaVOList[cityIndex].cityName}}
</div>
<ul v-show="showindex[1]">
<li v-for="(item,index) in areaList[province].areaVOList" :key="index"
@click.stop="selcityName(index,item.cityName)">
{{item.cityName}}
</li>
</ul>
</li>
<span class="text">市</span>
<!-- 区 -->
<li class="area-menu region-list">
<div class="area-msg" @click.stop="show(2)">
{{areaList[province].areaVOList[cityIndex].areaVOList[countyIndex].countyName}}
</div>
<ul v-show="showindex[2]" style="right:-40px;">
<li v-for="(item,index) in areaList[province].areaVOList[cityIndex].areaVOList" :key="index"
@click.stop="selcountyName(index,item.countyName)">
{{item.countyName}}</li>
</ul>
</li>
<span class="text">区/县</span>
</div>
</div>
</section>
</div>
</template>
<script>
let data = {
areaList: [], //省市区三级联动的数据
InitializeList: [], //我写得联动数据
showindex: [false, false, false], //控制省市区弹框显示
province: 0, //默认省下标
cityIndex: 0, //默认市下标
countyIndex: 0, //默认区下标
istoubi: false,
selectType: 0, //默认广告类型索引 全部
attr1Index: -1, //默认广告位置类型索引
attr2Index: -1, //默认设备类型索引
//发送给后台的值
address_str: ['全部', '全部', '全部'], //地址
select_parmas: {
county: '全部,全部,全部', //省市区
selectTypeID: -1, //选择的广告类型id
selectAttr1ID: -1, //选择的广告位置id
selectAttr2ID: -1, //选择的设备类型id
}
}
$('html').click(function (e) {
data.showindex = [false, false, false]
})
import Area from '../../static/json/area.json'
export default {
data() {
return data
},
created() {
console.log(this.area)
this.areaList = this.area[0];
// console.log(Area)
// this.areaList = Area[0];
},
methods: {
//显示下拉框
show(index) {
let arr = [...this.showindex];
//弹框显示时 直接全部隐藏
if (arr[index] == true) {
arr = [false, false, false]
} else {
arr = [false, false, false] //初始化全部隐藏
arr[index] = true
}
this.showindex = arr;
},
//省的点击事件
selprovinceName(index, value) {
this.showindex = [false, false, false]
this.province = index;
this.cityIndex = 0; //默认市下标
this.countyIndex = 0; //默认区下标
let address = [...this.address_str]
address[0] = value;
this.address_str = address;
},
//市的点击事件
selcityName(index, value) {
this.showindex = [false, false, false]
this.cityIndex = index;
this.countyIndex = 0; //默认区下标
let address = [...this.address_str]
address[1] = value;
this.address_str = address;
},
//区的点击事件
selcountyName(index, value) {
this.showindex = [false, false, false]
this.countyIndex = index;
let address = [...this.address_str]
address[2] = value;
this.address_str = address;
},
},
}
</script>
<style scoped lang="scss">
@import "../common/common";
.section {
box-sizing: border-box;
margin-bottom: 0.38rem;
.tittle {
margin-bottom: 0.2rem;
}
.box {
.labelspan {
margin-right: 0.18rem;
margin-bottom: 0.19rem;
box-sizing: border-box;
}
//视频时长
.longvalue {
display: flex;
flex-wrap: nowrap;
align-items: center;
margin-bottom: 0.1rem;
.time_box {
width: 1.6rem;
height: 0.56rem;
line-height: 0.56rem;
border: 1px solid rgba(230, 230, 230, 1);
border-radius: 0.1rem;
padding-left: 0.38rem;
margin: 0 0.17rem;
}
}
//选择投放时间
.slect {
width: 100%;
line-height: 0.56rem;
border: 1px solid rgba(230, 230, 230, 1);
border-radius: 0.1rem;
padding-left: 0.2rem;
color: #4984EB;
}
//选择时间段
.slect_time {
display: flex;
flex-wrap: nowrap;
align-items: center;
.middle {
margin: 0 0.24rem;
line-height: 0.56rem;
}
.time_box {
width: 1.6rem;
height: 0.56rem;
line-height: 0.56rem;
border: 1px solid rgba(230, 230, 230, 1);
border-radius: 0.1rem;
padding-left: 0.38rem;
}
}
}
.tip {
// margin-top:
}
}
.area {
display: flex;
flex-wrap: nowrap;
align-items: center;
.text {
margin: 0 0.15rem;
}
.area-menu {
position: relative;
display: inline-block;
.area-msg {
width: 1.5rem;
height: 0.56rem;
line-height: 0.56rem;
background-color: #fff;
border: 1px solid #dcdcdc;
border-radius: 0.1rem;
text-align: center;
overflow: hidden;
}
ul {
position: absolute;
top: 0.57rem;
width: 160px;
height: auto;
max-height: 180px;
font-size: 14px;
overflow-y: scroll;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
li {
text-align: center;
height: 30px;
line-height: 30px;
}
}
}
}
</style>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。