三级联动，随着越来越多的审美，出现了很多种，好多公司都仿着淘宝的三级联动 ，好看时尚，so我们公司也一样……为了贴代码方便，我把写在data里面省市区的json独立了出来，下载贴进去即可用，链接如下：vue.json(这个直接是个data，放入你的vue2项目中即可。（因为我的项目是用的vue2，所以，其他的属性跟博客内容是吻合的。请配合博客再下载此json）)。
首先页面显示如下：
然后我们县级所在地区会出现三级联动，如下：（以下是片段，背景色未截取）
这个张什么样，以什么形式出现，取决于贵公司的UI需求，我们公司是做成弹出层了。。然后背景色透明，这里为了节省流量，我只截取了一段，最后显示如下：
如果贵公司也跟我们需求一样，希望这个可以帮到你们。下面是在vue2项目中写的三级联动代码以及css样式：
<template>
<section class=\"myAddress\">
<section>
<section class=\"cont\" @click=\"choseAdd()\">
<section>
<span>所在地区：{{Province?Province:\'\'}} {{City?City:\'\'}} {{District?District:\'\'}}</span>
</section>
<img src=\"../../assets/main/right.png\" alt=\"\">
<div style=\"clear: both\"></div>
</section>
</section>
<!-- 居住地址三级联动选项 -->
<section class=\"showChose\" v-show=\"showChose\">
<section class=\"address\">
<section class=\"title\">
<h4>居住地址</h4>
<span @click=\"closeAdd()\">×</span>
</section>
<section class=\"title\">
<div class=\"area\" @click=\"provinceSelected()\">
{{Province?Province:info[province-1].name}}
</div>
<div class=\"area\" @click=\"citySelected()\" :class=\"City?\'\':\'active\'\">
{{City?City:\'请选择\'}}
</div>
<div class=\"area\" @click=\"districtSelected()\" :class=\"District?\'\':\'active\'\" v-show=\"City\">
{{District?District:\'请选择\'}}
</div>
</section>
<ul>
<li class=\"addList\" v-for=\"(v,k) in info\"
@click=\"getProvinceId(v.id, v.name, k)\"
v-show=\"showProvince\"
:class=\"v.selected ? \'active\' : \'\'\">{{v.name}}</li>
<li class=\"addList\" v-for=\"(v,k) in showCityList\"
@click=\"getCityId(v.id, v.name, k)\"
v-show=\"showCity\"
:class=\"v.selected ? \'active\' : \'\'\">{{v.name}}</li>
<li class=\"addList\" v-for=\"(v,k) in showDistrictList\"
@click=\"getDistrictId(v.id, v.name, k)\"
v-show=\"showDistrict\"
:class=\"v.selected ? \'active\' : \'\'\">{{v.name}}</li>
</ul>
</section>
</section>
<!-- 页面内容 -->
<section class=\"cont\">
<span>详细地址：</span>
<input type=\"text\" v-model=\"address\" placeholder=\" 请填写详细地址\">
</section>
</section>
</template>
<script>
import {
mapActions,
mapGetters
} from \'vuex\';
import api from \'./../../fetch/api.js\'
export default {
name: \'address\',
data(){},此处的data直接下载json复制进去即可。http://download.csdn.net/detail/zhaohaixin0418/9862255。
components: {
MineHeader
},
computed: {
...mapGetters([
\'BCcontextPathSrc\',
\'sessionId\',
\'token\',
]),
},
methods: {
choseAdd: function() {
this.showChose = true;
},
closeAdd: function() {
this.showChose = false;
},
_filter(add, name, code) {
let result = [];
for (let i = 0; i < add.length; i++) {
if (code == add[i].id) {
result = add[i][name];
}
}
return result;
},
getProvinceId: function(code, input, index) {
this.province = code;
this.Province = input;
this.showProvince = false;
this.showCity = true;
this.showDistrict = false;
this.showCityList = this._filter(this.info, \'city\', this.province);
// 点击选择当前
this.info.map(a => a.selected = false);
this.info[index].selected = true;
this.areaProvince = input;
},
provinceSelected: function() {
// 清除市级和区级列表
this.showCityList = false;
this.showDistrictList = false;
// 清除市级和区级选项
this.City = false;
this.District = false;
// 选项页面的切换
this.showProvince = true;
this.showCity = false;
this.showDistrict = false;
},
getCityId: function(code, input, index) {
this.city = code;
this.City = input;
this.showProvince = false;
this.showCity = false;
this.showDistrict = true;
this.showDistrictList = this._filter(this.showCityList, \'district\', this.city);
// 选择当前添加active
this.showCityList.map(a => a.selected = false);
this.showCityList[index].selected = true;
this.areaCity = input;
},
citySelected: function() {
this.showProvince = false;
this.showCity = true;
this.showDistrict = false;
},
getDistrictId: function(code, input, index) {
this.district = code;
this.District = input;
// 选择当前添加active
this.showDistrictList.map(a => a.selected = false);
this.showDistrictList[index].selected = true;
// 选取市区选项之后关闭弹层
this.showChose = false;
this.areaDistrict = input;
},
districtSelected: function() {
this.showProvince = false;
this.showCity = false;
this.showDistrict = true;
},
saveProfile: function() {
api.commonApi(\'后台接口\', 这里是贵公司后台接口，按照你们公司的改了就好
\'param_key={\"head\":{\"TYPE\":\"ADD_UPD_INFO\",\' +
\'\"SESSION_ID\":\"\' + this.sessionId + \'\",\' +
\'\"TOKEN\":\"\' + this.token + \'\",\"DEVICE_ID\":\"\"},\' +
\'\"param\":{\"PROVINCE\":\"\' + this.areaProvince + \'\", \' +
\'\"CITY\":\"\' + this.areaCity + \'\", \"COUNTY\":\"\' + this.areaDistrict + \'\",\' +
\'\"ADDRESS\": \"\' + this.address + \'\"}}\')
.then(res => {
console.log(res.data);
});
}
}
}
</script>
<style scoped>
.myAddress {
width: 100%;
background-color: white;
border-top: 4px solid rgba(245, 245, 245, 1);
color: #333;
}
.myAddress .cont {
border-bottom: 1px solid rgba(245, 245, 245, 0.8);
}
.myAddress .cont span {
display: inline-block;
font-size: 0.28rem;
color: #333;
line-height: 0.88rem;
margin-left: 0.32rem;
}
.myAddress .cont section {
float: left;
}
.myAddress .cont img {
float: right;
width: 0.14rem;
height: 0.24rem;
margin: 0.32rem 0.32rem 0.32rem 0;
}
.showChose {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 120;
background: rgba(77, 82, 113, 0.8);
}
.address {
position: absolute;
bottom: 0;
left: 0;
z-index: 121;
background: #fff;
width: 100%;
}
.title h4 {
display: inline-block;
margin-left: 3.2rem;
font-size: 0.32rem;
line-height: 0.88rem;
font-weight: normal;
color: #999;
}
.title span {
margin: 0.42rem 0 0 2.2rem;
font-size: 0.45rem;
line-height: 0.34rem;
color: #D8D8D8;
}
.area {
display: inline-block;
font-size: 0.24rem;
line-height: 0.88rem;
margin-left: 0.42rem;
color: #333;
}
.addList {
padding-left: 0.32rem;
font-size: 0.34rem;
line-height: 0.88rem;
color: #333;
}
/* 修改的格式 */
.address ul {
height: 100%;
margin-left: 5%;
max-height: 4.4rem;
overflow: auto;
}
.address .title .active {
color: #0071B8;
border-bottom: 0.02rem solid #0071B8;
}
.address ul .active {
color: #0071B8;
}
</style>
这样就完成了一个省市区的三级联动。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容