子组件
三级联动的省市区展示
<template>
<div class="multiLevelLinkage">
<!-- 弹出层 -->
<van-popup class="popPanel" position="bottom" :closeOnClickOverlay="false" v-model="show">
<!-- 右上角确定按钮 -->
<div class="multiBtn">
<span @click="PopParentCancel()">取消</span>
<span @click="select(0)" :class="{'titleStyle':isFlag == '0'}">{{titleList[0]}}</span>
<span @click="select(1)" :class="{'titleStyle':isFlag == '1'}">{{titleList[1]}}</span>
<!-- <span @click="select(2)">{{titleList[2]}}</span> -->
<span @click="PopParentConfirm()">确定</span>
</div>
<!-- 联动面板 -->
<div class="tabGroup">
<!-- 第一联 -->
<div class="tabItem" v-if='isFlag == "0"'>
<div v-for="(item, index) in provinceList" :key="index" :class="{'isActive' : item.isSelected}" @click="selectTab0(item, index),getCity()" >
<span>{{item.dicName}}</span>
</div>
</div>
<!-- 第二联 -->
<div class="tabItem" v-if='isFlag == "1"'>
<div v-for="(item, index) in cityList" :key="index" :class="{'isActive' : item.isSelected}" @click="selectTab1(item, index)">
<span>{{item.dicName}}</span>
</div>
</div>
<!-- 第三联 -->
<!-- <div class="tabItem" v-if='isFlag == "2"'>
<div v-for="(item, index) in districtList" :key="index" :class="{'isActive' : item.isSelected}" @click="selectTab2(item, index)">
<span>{{item.dicName}}</span>
</div>
</div> -->
</div>
</van-popup>
</div>
</template>
<script>
export default {
dicName: 'multiLevelLinkage', // 该页面为多级联动页面
data () {
return {
show: true, // 是否显示弹层
titleList: ['省', '市'], // tab标题
isFlag: '0', // 默认显示首个标题&面板
currentValue: [], // 选中的结果
defaultTitle: ['省', '市']
};
},
props: {
provinceList: Array, // 省
cityList: Array, // 市
// districtList: Array, // 区
defaultValue: Array, // 省市默认值
title: Array
},
created () {
console.log(this.defaultValue);
console.log(this.provinceList);
console.log(this.cityList);
for (var i = 0; i < this.provinceList.length; i++) {
this.provinceList[i].isSelected = false;
}
for (var i = 0; i < this.cityList.length; i++) {
this.cityList[i].isSelected = false;
}
// 判断是否选择第一级
// 已选择
if (this.defaultValue[0]) {
this.titleList[0] = this.defaultTitle[0];
this.isFlag = '0';
this.currentValue[0] = this.defaultValue[0];
// 加上默认选中的样式
for (var i = 0; i < this.provinceList.length; i++) {
let item = this.provinceList[i];
if (item.dicCode == this.defaultValue[0].dicCode) {
item.isSelected = true;
}
}
} else {
// 未选择
this.titleList[0] = this.defaultTitle[0];
}
// 判断市是否存在
if (this.defaultValue[1]) {
this.isFlag = '1';
this.watchCityList();
} else {
// 未选择
this.titleList[1] = this.defaultTitle[1];
}
// }
// 判断是否选择第三级
// if (this.defaultValue[2]) {
// this.titleList[2] = this.defaultTitle[2];
// this.isFlag = '2';
// this.currentValue[2] = this.defaultValue[2];
// // 加上默认选中的样式
// for (var i = 0; i < this.districtList.length; i++) {
// let item = this.districtList[i];
// if (item.dicCode == this.defaultValue[2].dicCode) {
// item.isSelected = true;
// }
// }
// } else {
// // 未选择
// this.titleList[2] = this.defaultTitle[2];
// }
},
methods: {
// 点击tabGroup选择
select (idx) {
if (idx != 0 && this.currentValue[idx - 1]) {
this.isFlag = idx;
} else if (idx == 0) {
this.isFlag = idx;
}
},
// 选择第一级
selectTab0 (item, index) {
console.log('我是第一级');
this.currentValue = [];
let obj = {
dicName: item.dicName,
dicCode: item.dicCode
};
this.currentValue[0] = obj;
console.log(this.currentValue[0]);
this.isFlag = '1';
// 滚动选择时，去除当前tab和下一个tab的选中样式
for (var i = 0; i < this.provinceList.length; i++) {
this.provinceList[i].isSelected = false;
}
for (var i = 0; i < this.cityList.length; i++) {
this.cityList[i].isSelected = false;
}
console.log(this.currentValue);
// 添加选中的样式
this.provinceList[index].isSelected = true;
// 通知父元素调用市的接口
this.getCity();
},
selectTab1 (item, index) {
console.log('我是第二级');
this.currentValue[1] = '';
let obj = {
dicName: item.dicName,
dicCode: item.dicCode
};
this.currentValue[1] = obj;
console.log(this.currentValue[1]);
// this.isFlag = '2';
// 滚动选择时，去除当前tab和下一个tab的选中样式
for (var i = 0; i < this.cityList.length; i++) {
this.cityList[i].isSelected = false;
}
// for (var i = 0; i < this.districtList.length; i++) {
// this.districtList[i].isSelected = false;
// }
console.log(this.currentValue);
// 添加选中的样式
this.cityList[index].isSelected = true;
this.$set(this.cityList, index, {
dicName: this.cityList[index].dicName,
dicCode: this.cityList[index].dicCode,
isSelected: true
});
},
// 选择第三级
// selectTab2 (item, index) {
// console.log('我是第三级');
// this.currentValue[2] = '';
// let obj = {
// dicName: item.dicName,
// dicCode: item.dicCode
// };
// this.currentValue[2] = obj;
// console.log(this.currentValue[2]);
// console.log(this.currentValue);
// for (var i = 0; i < this.districtList.length; i++) {
// this.districtList[i].isSelected = false;
// }
// // 添加选中的样式
// this.districtList[index].isSelected = true;
// console.log(this.districtList);
// this.$set(this.districtList, index, {
// dicName: this.districtList[index].dicName,
// dicCode: this.districtList[index].dicCode,
// isSelected: true
// });
// }
/** 监听是否有市 */
watchCityList () {
// 判断是否选择第二级
if (this.cityList.length === 0) {
setTimeout(() => {
this.watchCityList();
}, 200);
} else {
this.titleList[1] = this.defaultTitle[1];
this.currentValue[1] = this.defaultValue[1];
// 加上默认选中的样式
for (var i = 0; i < this.cityList.length; i++) {
let item = this.cityList[i];
if (item.dicCode == this.defaultValue[1].dicCode) {
item.isSelected = true;
// 更新数据
this.$set(this.cityList, i, {
dicName: this.cityList[i].dicName,
dicCode: this.cityList[i].dicCode,
isSelected: true
});
return;
}
}
}
},
PopParentCancel () {
this.$emit('theEvToParentCancel');
},
PopParentConfirm () {
var selectedVal = {
value: this.currentValue
};
console.log('我是要传给父级的', selectedVal);
this.$emit('theEvToParentConfirm', selectedVal);
},
getCity () {
this.$emit('theEvToParentGetCity', this.currentValue[0]);
}
}
};
</script>
<style lang="less" scoped>
.multiLevelLinkage{
.popPanel{
width:100%;
height:30%;
.multiBtn{
display: flex;
justify-content: space-between;
height:30px;
line-height:30px;
background-color: rgba(204,204,204,0.5);
overflow: hidden;
.titleStyle{
color:#356AE6;
border-bottom:2px solid #356AE6;
}
span{
flex: 1;
text-align: center;
width: 25%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.tabGroup{
display: flex;
justify-content: space-around;
width:100%;
.tabItem{
width:100%;
text-align:center;
height: 300px;
overflow-y: scroll;
padding: 0 4%;
div{
width:100%;
height:30px;
line-height:30px;
border-bottom: 1px solid rgba(204,204,204,0.4);
}
span{
position: relative;
align-items: center;
// line-height:30px;
padding-left: 10px;
}
.isActive{
color:#356AE6;
}
}
}
}
}
</style>
知识点：
this.$set() 用于最后一级选中后增加选中样式 链接-----https://www.cnblogs.com/Super-scarlett/p/11132034.html
