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>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。