子组件
三级联动的省市区展示
1<template> 2 <div class="multiLevelLinkage"> 3 <!-- 弹出层 --> 4 <van-popup class="popPanel" position="bottom" :closeOnClickOverlay="false" v-model="show"> 5 <!-- 右上角确定按钮 --> 6 <div class="multiBtn"> 7 <span @click="PopParentCancel()">取消</span> 8 <span @click="select(0)" :class="{'titleStyle':isFlag == '0'}">{{titleList[0]}}</span> 9 <span @click="select(1)" :class="{'titleStyle':isFlag == '1'}">{{titleList[1]}}</span> 10 <!-- <span @click="select(2)">{{titleList[2]}}</span> --> 11 <span @click="PopParentConfirm()">确定</span> 12 </div> 13 <!-- 联动面板 --> 14 <div class="tabGroup"> 15 <!-- 第一联 --> 16 <div class="tabItem" v-if='isFlag == "0"'> 17 <div v-for="(item, index) in provinceList" :key="index" :class="{'isActive' : item.isSelected}" @click="selectTab0(item, index),getCity()" > 18 <span>{{item.dicName}}</span> 19 </div> 20 </div> 21 <!-- 第二联 --> 22 <div class="tabItem" v-if='isFlag == "1"'> 23 <div v-for="(item, index) in cityList" :key="index" :class="{'isActive' : item.isSelected}" @click="selectTab1(item, index)"> 24 <span>{{item.dicName}}</span> 25 </div> 26 </div> 27 <!-- 第三联 --> 28 <!-- <div class="tabItem" v-if='isFlag == "2"'> 29 <div v-for="(item, index) in districtList" :key="index" :class="{'isActive' : item.isSelected}" @click="selectTab2(item, index)"> 30 <span>{{item.dicName}}</span> 31 </div> 32 </div> --> 33 </div> 34 </van-popup> 35 </div> 36</template> 37<script> 38export default { 39 dicName: 'multiLevelLinkage', // 该页面为多级联动页面 40 data () { 41 return { 42 show: true, // 是否显示弹层 43 titleList: ['省', '市'], // tab标题 44 isFlag: '0', // 默认显示首个标题&面板 45 currentValue: [], // 选中的结果 46 defaultTitle: ['省', '市'] 47 }; 48 }, 49 props: { 50 provinceList: Array, // 省 51 cityList: Array, // 市 52 // districtList: Array, // 区 53 defaultValue: Array, // 省市默认值 54 title: Array 55 }, 56 created () { 57 console.log(this.defaultValue); 58 console.log(this.provinceList); 59 console.log(this.cityList); 60 for (var i = 0; i < this.provinceList.length; i++) { 61 this.provinceList[i].isSelected = false; 62 } 63 for (var i = 0; i < this.cityList.length; i++) { 64 this.cityList[i].isSelected = false; 65 } 66 // 判断是否选择第一级 67 // 已选择 68 if (this.defaultValue[0]) { 69 this.titleList[0] = this.defaultTitle[0]; 70 this.isFlag = '0'; 71 this.currentValue[0] = this.defaultValue[0]; 72 // 加上默认选中的样式 73 for (var i = 0; i < this.provinceList.length; i++) { 74 let item = this.provinceList[i]; 75 if (item.dicCode == this.defaultValue[0].dicCode) { 76 item.isSelected = true; 77 } 78 } 79 } else { 80 // 未选择 81 this.titleList[0] = this.defaultTitle[0]; 82 } 83 // 判断市是否存在 84 if (this.defaultValue[1]) { 85 this.isFlag = '1'; 86 this.watchCityList(); 87 } else { 88 // 未选择 89 this.titleList[1] = this.defaultTitle[1]; 90 } 91 // } 92 // 判断是否选择第三级 93 // if (this.defaultValue[2]) { 94 // this.titleList[2] = this.defaultTitle[2]; 95 // this.isFlag = '2'; 96 // this.currentValue[2] = this.defaultValue[2]; 97 // // 加上默认选中的样式 98 // for (var i = 0; i < this.districtList.length; i++) { 99 // let item = this.districtList[i]; 100 // if (item.dicCode == this.defaultValue[2].dicCode) { 101 // item.isSelected = true; 102 // } 103 // } 104 // } else { 105 // // 未选择 106 // this.titleList[2] = this.defaultTitle[2]; 107 // } 108 }, 109 methods: { 110 // 点击tabGroup选择 111 select (idx) { 112 if (idx != 0 && this.currentValue[idx - 1]) { 113 this.isFlag = idx; 114 } else if (idx == 0) { 115 this.isFlag = idx; 116 } 117 }, 118 // 选择第一级 119 selectTab0 (item, index) { 120 console.log('我是第一级'); 121 this.currentValue = []; 122 let obj = { 123 dicName: item.dicName, 124 dicCode: item.dicCode 125 }; 126 this.currentValue[0] = obj; 127 console.log(this.currentValue[0]); 128 this.isFlag = '1'; 129 // 滚动选择时，去除当前tab和下一个tab的选中样式 130 for (var i = 0; i < this.provinceList.length; i++) { 131 this.provinceList[i].isSelected = false; 132 } 133 for (var i = 0; i < this.cityList.length; i++) { 134 this.cityList[i].isSelected = false; 135 } 136 137 console.log(this.currentValue); 138 // 添加选中的样式 139 this.provinceList[index].isSelected = true; 140 // 通知父元素调用市的接口 141 this.getCity(); 142 }, 143 selectTab1 (item, index) { 144 console.log('我是第二级'); 145 this.currentValue[1] = ''; 146 let obj = { 147 dicName: item.dicName, 148 dicCode: item.dicCode 149 }; 150 this.currentValue[1] = obj; 151 console.log(this.currentValue[1]); 152 // this.isFlag = '2'; 153 // 滚动选择时，去除当前tab和下一个tab的选中样式 154 for (var i = 0; i < this.cityList.length; i++) { 155 this.cityList[i].isSelected = false; 156 } 157 // for (var i = 0; i < this.districtList.length; i++) { 158 // this.districtList[i].isSelected = false; 159 // } 160 console.log(this.currentValue); 161 // 添加选中的样式 162 this.cityList[index].isSelected = true; 163 this.$set(this.cityList, index, { 164 dicName: this.cityList[index].dicName, 165 dicCode: this.cityList[index].dicCode, 166 isSelected: true 167 }); 168 }, 169 // 选择第三级 170 // selectTab2 (item, index) { 171 // console.log('我是第三级'); 172 // this.currentValue[2] = ''; 173 // let obj = { 174 // dicName: item.dicName, 175 // dicCode: item.dicCode 176 // }; 177 // this.currentValue[2] = obj; 178 // console.log(this.currentValue[2]); 179 // console.log(this.currentValue); 180 // for (var i = 0; i < this.districtList.length; i++) { 181 // this.districtList[i].isSelected = false; 182 // } 183 // // 添加选中的样式 184 // this.districtList[index].isSelected = true; 185 // console.log(this.districtList); 186 // this.$set(this.districtList, index, { 187 // dicName: this.districtList[index].dicName, 188 // dicCode: this.districtList[index].dicCode, 189 // isSelected: true 190 // }); 191 // } 192 /** 监听是否有市 */ 193 watchCityList () { 194 // 判断是否选择第二级 195 if (this.cityList.length === 0) { 196 setTimeout(() => { 197 this.watchCityList(); 198 }, 200); 199 } else { 200 this.titleList[1] = this.defaultTitle[1]; 201 this.currentValue[1] = this.defaultValue[1]; 202 // 加上默认选中的样式 203 for (var i = 0; i < this.cityList.length; i++) { 204 let item = this.cityList[i]; 205 if (item.dicCode == this.defaultValue[1].dicCode) { 206 item.isSelected = true; 207 // 更新数据 208 this.$set(this.cityList, i, { 209 dicName: this.cityList[i].dicName, 210 dicCode: this.cityList[i].dicCode, 211 isSelected: true 212 }); 213 return; 214 } 215 } 216 } 217 }, 218 PopParentCancel () { 219 this.$emit('theEvToParentCancel'); 220 }, 221 PopParentConfirm () { 222 var selectedVal = { 223 value: this.currentValue 224 }; 225 console.log('我是要传给父级的', selectedVal); 226 this.$emit('theEvToParentConfirm', selectedVal); 227 }, 228 getCity () { 229 this.$emit('theEvToParentGetCity', this.currentValue[0]); 230 } 231 } 232}; 233</script> 234<style lang="less" scoped> 235.multiLevelLinkage{ 236 .popPanel{ 237 width:100%; 238 height:30%; 239 .multiBtn{ 240 display: flex; 241 justify-content: space-between; 242 height:30px; 243 line-height:30px; 244 background-color: rgba(204,204,204,0.5); 245 overflow: hidden; 246 .titleStyle{ 247 color:#356AE6; 248 border-bottom:2px solid #356AE6; 249 } 250 span{ 251 flex: 1; 252 text-align: center; 253 width: 25%; 254 overflow: hidden; 255 text-overflow: ellipsis; 256 white-space: nowrap; 257 } 258 } 259 .tabGroup{ 260 display: flex; 261 justify-content: space-around; 262 width:100%; 263 264 .tabItem{ 265 width:100%; 266 text-align:center; 267 height: 300px; 268 overflow-y: scroll; 269 padding: 0 4%; 270 div{ 271 width:100%; 272 height:30px; 273 line-height:30px; 274 border-bottom: 1px solid rgba(204,204,204,0.4); 275 } 276 span{ 277 position: relative; 278 align-items: center; 279 // line-height:30px; 280 padding-left: 10px; 281 } 282 .isActive{ 283 color:#356AE6; 284 } 285 } 286 } 287 } 288} 289</style> 290
知识点：
this.$set() 用于最后一级选中后增加选中样式 链接-----https://www.cnblogs.com/Super-scarlett/p/11132034.html