以前给别人完善过一个Vue的三级联动,今天想起来,给大家分享下,只供参考,请勿吐槽
<script src="https://unpkg.com/vue"></script> <style> * { padding: 0px; margin: 0px; } li { list-style: none; height: 30px; line-height: 30px; text-align: center; cursor: pointer; } ul { width: 300px; height: 500px; display: inline-block; border: solid 1px #eee; float: left; margin-left: 20px; } .active { background-color: #eee; } .newadd { width: 100px; border: none; } .newadd li { border: solid 1px #eee; margin-bottom: 15px; } </style> </head> <body> <div class="myAddress"> <!--居住地址三级联动选项--> <section class="showChose"> <section class="address"> <section class="title"> <span class="area" @click="provinceSelected()">{{Province?Province:info[0].name}}</span> <span class="area" @click="citySelected()">{{City?City:'请选择'}}</span> <span class="area" @click="districtSelected()"v-show="City">{{District?District:'请选择'}}</span> </section> <div> <ul class="pro-ul"> <li class="addList" v-for="(v,k) in info" @click="getProvinceId(v.id, v.name, k)" :class="v.selected ? 'active' : ''">{{v.name}}</li> </ul> <ul class="city-ul"> <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> </ul> <ul class="dist-ul"> <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> <ul class="newadd"> <li @click="newAdd(1)">></li> <li @click="newAdd(0)"><</li> </ul> <ul class="newadd-ul"> <li class="addList" v-for="(v,k) in showNewAddList" @click="getNewAddId(v.ids, v.citys, k)" :class="v.selected ? 'active' : ''">{{v.citys}}</li> </ul> </div> </section> </section> </div> </body> <script> var adata= [{id:3,name:'河北',city:[{id:4,name:'唐山市',district:[{id:60,name:'路南区'},{id:61,name:'路北区'},{id:62,name:'古冶区'},{id:63,name:'开平区'},{id:64,name:'丰南区'},{id:65,name:'丰润区'},{id:66,name:'滦县'},{id:67,name:'滦南县'},{id:68,name:'乐亭县'},{id:69,name:'迁西县'},{id:70,name:'玉田县'},{id:71,name:'唐海县'},{id:72,name:'遵化市'},{id:73,name:'迁安市'}]},{id:5,name:'秦皇岛市',district:[{id:74,name:'海港区'},{id:75,name:'山海关区'},{id:76,name:'北戴河区'},{id:77,name:'青龙满族自治县'},{id:78,name:'昌黎县'},{id:79,name:'抚宁县'},{id:80,name:'卢龙县'}]},{id:6,name:'邯郸市',district:[{id:81,name:'邯山区'},{id:82,name:'丛台区'},{id:83,name:'复兴区'},{id:84,name:'峰峰矿区'},{id:85,name:'邯郸县'},{id:86,name:'临漳县'},{id:87,name:'成安县'},{id:88,name:'大名县'},{id:89,name:'涉县'},{id:90,name:'磁县'},{id:91,name:'肥乡县'},{id:92,name:'永年县'},{id:93,name:'邱县'},{id:94,name:'鸡泽县'},{id:95,name:'广平县'},{id:96,name:'馆陶县'},{id:97,name:'魏县'},{id:98,name:'曲周县'},{id:99,name:'武安市'}]}]},{id:7,name:'山西',city:[{id:14,name:'太原市',district:[{id:209,name:'小店区'},{id:210,name:'迎泽区'},{id:211,name:'杏花岭区'},{id:212,name:'尖草坪区'},{id:213,name:'万柏林区'},{id:214,name:'晋源区'},{id:215,name:'清徐县'},{id:216,name:'阳曲县'},{id:217,name:'娄烦县'},{id:218,name:'古交市'}]},{id:15,name:'大同市',district:[{id:219,name:'城区'},{id:220,name:'矿区'},{id:221,name:'南郊区'},{id:222,name:'新荣区'},{id:223,name:'阳高县'},{id:224,name:'天镇县'},{id:225,name:'广灵县'},{id:226,name:'灵丘县'},{id:227,name:'浑源县'},{id:228,name:'左云县'},{id:229,name:'大同县'}]},{id:16,name:'阳泉市',district:[{id:230,name:'城区'},{id:231,name:'矿区'},{id:232,name:'郊区'},{id:233,name:'平定县'},{id:234,name:'盂县'}]},{id:17,name:'长治市',district:[{id:235,name:'城区'},{id:236,name:'郊区'},{id:237,name:'长治县'},{id:238,name:'襄垣县'},{id:239,name:'屯留县'},{id:240,name:'平顺县'},{id:241,name:'黎城县'},{id:242,name:'壶关县'},{id:243,name:'长子县'},{id:244,name:'武乡县'},{id:245,name:'沁县'},{id:246,name:'沁源县'},{id:247,name:'潞城市'}]},{id:18,name:'晋城市',district:[{id:248,name:'城区'},{id:249,name:'沁水县'},{id:250,name:'阳城县'},{id:251,name:'陵川县'},{id:252,name:'泽州县'},{id:253,name:'高平市'}]}]},{id:8,name:'山西2',city:[{id:14,name:'太原市',district:[{id:209,name:'小店区'},{id:210,name:'迎泽区'},{id:211,name:'杏花岭区'},{id:212,name:'尖草坪区'},{id:213,name:'万柏林区'},{id:214,name:'晋源区'},{id:215,name:'清徐县'},{id:216,name:'阳曲县'},{id:217,name:'娄烦县'},{id:218,name:'古交市'}]},{id:15,name:'大同市',district:[{id:219,name:'城区'},{id:220,name:'矿区'},{id:221,name:'南郊区'},{id:222,name:'新荣区'},{id:223,name:'阳高县'},{id:224,name:'天镇县'},{id:225,name:'广灵县'},{id:226,name:'灵丘县'},{id:227,name:'浑源县'},{id:228,name:'左云县'},{id:229,name:'大同县'}]},{id:16,name:'阳泉市',district:[{id:230,name:'城区'},{id:231,name:'矿区'},{id:232,name:'郊区'},{id:233,name:'平定县'},{id:234,name:'盂县'}]},{id:17,name:'长治市',district:[{id:235,name:'城区'},{id:236,name:'郊区'},{id:237,name:'长治县'},{id:238,name:'襄垣县'},{id:239,name:'屯留县'},{id:240,name:'平顺县'},{id:241,name:'黎城县'},{id:242,name:'壶关县'},{id:243,name:'长子县'},{id:244,name:'武乡县'},{id:245,name:'沁县'},{id:246,name:'沁源县'},{id:247,name:'潞城市'}]},{id:18,name:'晋城市',district:[{id:248,name:'城区'},{id:249,name:'沁水县'},{id:250,name:'阳城县'},{id:251,name:'陵川县'},{id:252,name:'泽州县'},{id:253,name:'高平市'}]}]}]; </script> <script> var example2 = new Vue({ el: '.myAddress', data: { showCity: true, showDistrict: true, showCityList: true, showDistrictList: true, showNewAddList:false, province: 3, city: 4, district: 60, District: false, Province: false, City: false, // v-for循环判断是否为当前 selected: false, //已选地址里当前选中项 nowFocusAdd:false, info: adata }, created: function () { }, // 在 `methods` 对象中定义方法 methods: { _filter: function(add,name,code) { var result = []; for(var 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.showCity=true; this.showDistrict = false; this.showCityList = this._filter(this.info,'city',this.province); // 点击选择当前 this._inst(this.info); this._inst(this.showCityList); this._inst(this.showDistrictList); this.info[index].selected = true; }, provinceSelected: function() { // 清除市级和区级列表 this.showCityList = false; this.showDistrictList = false; // 清除市级和区级选项 this.City = false; this.District = false; // 选项页面的切换 this.showCity = false; this.showDistrict = false; }, getCityId: function(code, input, index) { this.city = code; this.City = input; this.showDistrict = true; this.showDistrictList = this._filter(this.showCityList,'district',this.city); // 选择当前添加active this._inst(this.showCityList); this._inst(this.showDistrictList); this.showCityList[index].selected = true; }, citySelected: function() { this.showCity=true; this.showDistrict = false; }, getDistrictId: function(code, input, index) { this.district = code; this.District = input; // 选择当前添加active this._inst(this.showDistrictList); this.showDistrictList[index].selected = true; // 选取市区选项之后关闭弹层 this.showChose = false; }, districtSelected: function() { this.showCity=false; this.showDistrict = true; }, //type为0表示删除,type为1表示添加 newAdd:function(type){ if(!this.showNewAddList)this.showNewAddList=[]; if(type>0){ this.showNewAddList.push({citys:this.Province+'-'+this.City+'-'+this.District,ids:this.province+'-'+this.city+'-'+this.district,selected:false}); }else{ this.showNewAddList.splice(this.nowFocusAdd,1); } this._inst(this.info); this._inst(this.showCityList); this._inst(this.showDistrictList); if(this.showNewAddList.length==0)this.nowFocusAdd=false; }, getNewAddId: function(code, input, index) { this.nowFocusAdd = index; // 选择当前添加active this.showNewAddList.map( function(a){ return a.selected = false} ); this.showNewAddList[index].selected = true; }, _inst:function(adata){ for(var e in adata){ adata[e].selected=false; for(var n in this.showNewAddList){ var ids=this.showNewAddList[n].ids.split('-'); for(var id in ids){ if(adata[e].id==ids[id])adata[e].selected=true; } } } } } }) </script>