以前给别人完善过一个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>