I have perfected a Vue three-level linkage for others before. I think about it today and share it with you. It is for reference only, please do not complain.
<script src="https://unpkg.com/vue"></script>
<style>
* {
padding: 0px;
margin: 0px;
}
at the {
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">
<!--Residential address three-level linkage option-->
<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:'Hebei',city:[{id:4,name:'Tangshan City',district:[{id:60,name:'Lunan District'},{id: 61,name:'Lubei District'},{id:62,name:'Guye District'},{id:63,name:'Kaiping District'},{id:64,name:'Fengnan District' },{id:65,name:'Fengrun District'},{id:66,name:'Luan County'},{id:67,name:'Luannan County'},{id:68,name:' Leting County'},{id:69,name:'Qianxi County'},{id:70,name:'Yutian County'},{id:71,name:'Tanghai County'},{id: 72,name:'Zunhua City'},{id:73,name:'Qian'an City'}]},{id:5,name:'Qinhuangdao City',district:[{id:74,name:' Haigang District'},{id:75,name:'Shanhaiguan District'},{id:76,name:'Beidaihe District'},{id:77,name:'Qinglong Manchu Autonomous County'},{id:78, name:'Changli County'},{id:79,name:'Funing County'},{id:80,name:'Lulong County'}]},{id:6,name:'Handan City',district :[{id:81,name:'Handan District'},{id:82,name:'Congtai District'},{id:83,name:'Fuxing District'},{id:84,name:' Fengfeng mining area'},{id:85,name:'Handan County'},{id:86,name:'Linzhang County'},{id:87,name:'Cheng'an County'},{id:88,name:'Daming County'},{id:89,name:' She County'},{id:90,name:'Cixian'},{id:91,name:'Feixiang County'},{id:92,name:'Yongnian County'},{id:93, name:'Qiu County'},{id:94,name:'Jize County'},{id:95,name:'Guangping County'},{id:96,name:'Guantao County'}, {id:97,name:'Weixian'},{id:98,name:'Quzhou County'},{id:99,name:'Wu'an City'}]}]},{id:7,name :'Shanxi',city:[{id:14,name:'Taiyuan City',district:[{id:209,name:'Xiaodian District'},{id:210,name:'Yingze District'} ,{id:211,name:'Xinghualing District'},{id:212,name:'Jiancaoping District'},{id:213,name:'Wanbolin District'},{id:214,name :'Jinyuan District'},{id:215,name:'Qingxu County'},{id:216,name:'Yangqu County'},{id:217,name:'Loufan County'}, {id:218,name:'Gujiao City'}]},{id:15,name:'Datong City',district:[{id:219,name:'District'},{id:220,name: 'Mining area'},{id:221,name:'South Suburb'},{id:222,name:'Xinrong District'},{id:223,name:'Yanggao County'},{id:224,name:'Tianzhen County'},{id:225,name:'Guangling County'} ,{id:226,name:'Lingqiu County'},{id:227,name:'Hunyuan County'},{id:228,name:'Zuoyun County'},{id:229,name: 'Datong County'}]},{id:16,name:'Yangquan City',district:[{id:230,name:'City District'},{id:231,name:'Mining Area'},{id: 232,name:'Suburban'},{id:233,name:'Pingding County'},{id:234,name:'Yu County'}]},{id:17,name:'Changzhi City',district :[{id:235,name:'City'},{id:236,name:'Suburban'},{id:237,name:'Changzhi County'},{id:238,name:'Xiangyuan County' },{id:239,name:'Tunliu County'},{id:240,name:'Pingshun County'},{id:241,name:'Licheng County'},{id:242,name: 'Huguan County'},{id:243,name:'Zhangzi County'},{id:244,name:'Wuxiang County'},{id:245,name:'Qin County'},{id: 246,name:'Qinyuan County'},{id:247,name:'Lucheng City'}]},{id:18,name:'Jincheng City',district:[{id:248,name:'City District '},{id:249,name:'Qinshui County'},{id:250,name:'Yangcheng County'},{id:251,name:'Lingchuan County'},{id:252,name:'Zezhou County '},{id:253,name:'Gaoping City'}]}]},{id:8,name:'Shanxi 2',city:[{id:14,name:'Taiyuan City',district:[ {id:209,name:'Xiaodian District'},{id:210,name:'Yingze District'},{id:211,name:'Xinghualing District'},{id:212,name: 'Jiancaoping District'},{id:213,name:'Wanbolin District'},{id:214,name:'Jinyuan District'},{id:215,name:'Qingxu County'},{ id:216,name:'Yangqu County'},{id:217,name:'Loufan County'},{id:218,name:'Gujiao City'}]},{id:15,name: 'Datong City',district:[{id:219,name:'city'},{id:220,name:'mining area'},{id:221,name:'south suburb'},{id:222, name:'Xinrong District'},{id:223,name:'Yanggao County'},{id:224,name:'Tianzhen County'},{id:225,name:'Guangling County'} ,{id:226,name:'Lingqiu County'},{id:227,name:'Hunyuan County'},{id:228,name:'Zuoyun County'},{id:229,name: 'Datong County'}]},{id:16,name:'Yangquan City',district:[{id:230,name:'city'},{id:231,name:'mining area'},{id:232,name:'suburb'},{id:233,name: 'Pingding County'},{id:234,name:'Yu County'}]},{id:17,name:'Changzhi City',district:[{id:235,name:'City District'},{id :236,name:'Suburban'},{id:237,name:'Changzhi County'},{id:238,name:'Xiangyuan County'},{id:239,name:'Tunliu County'}, {id:240,name:'Pingshun County'},{id:241,name:'Licheng County'},{id:242,name:'Huguan County'},{id:243,name:'eldest son County'},{id:244,name:'Wuxiang County'},{id:245,name:'Qin County'},{id:246,name:'Qinyuan County'},{id:247, name:'Lucheng City'}]},{id:18,name:'Jincheng City',district:[{id:248,name:'City District'},{id:249,name:'Qinshui County'} ,{id:250,name:'Yangcheng County'},{id:251,name:'Lingchuan County'},{id:252,name:'Zezhou County'},{id:253,name: 'Gaoping City'}]}]}];{id:233,name:'Pingding County'},{id:234,name:'Yu County'}]},{id:17,name:'Changzhi City',district:[{id:235,name: 'City'},{id:236,name:'Suburban'},{id:237,name:'Changzhi County'},{id:238,name:'Xiangyuan County'},{id:239,name: 'Tunliu County'},{id:240,name:'Pingshun County'},{id:241,name:'Licheng County'},{id:242,name:'Huguan County'},{id :243,name:'Zhangzi County'},{id:244,name:'Wuxiang County'},{id:245,name:'Qin County'},{id:246,name:'Qinyuan County' },{id:247,name:'Lucheng'}]},{id:18,name:'Jincheng',district:[{id:248,name:'city'},{id:249,name :'Qinshui County'},{id:250,name:'Yangcheng County'},{id:251,name:'Lingchuan County'},{id:252,name:'Zezhou County'}, {id:253,name:'Gaoping City'}]}]}];{id:233,name:'Pingding County'},{id:234,name:'Yu County'}]},{id:17,name:'Changzhi City',district:[{id:235,name: 'City'},{id:236,name:'Suburban'},{id:237,name:'Changzhi County'},{id:238,name:'Xiangyuan County'},{id:239,name: 'Tunliu County'},{id:240,name:'Pingshun County'},{id:241,name:'Licheng County'},{id:242,name:'Huguan County'},{id :243,name:'Zhangzi County'},{id:244,name:'Wuxiang County'},{id:245,name:'Qin County'},{id:246,name:'Qinyuan County' },{id:247,name:'Lucheng'}]},{id:18,name:'Jincheng',district:[{id:248,name:'city'},{id:249,name :'Qinshui County'},{id:250,name:'Yangcheng County'},{id:251,name:'Lingchuan County'},{id:252,name:'Zezhou County'}, {id:253,name:'Gaoping City'}]}]}];Xiangyuan County'},{id:239,name:'Tunliu County'},{id:240,name:'Pingshun County'},{id:241,name:'Licheng County'},{id:242 ,name:'Huguan County'},{id:243,name:'Zhangzi County'},{id:244,name:'Wuxiang County'},{id:245,name:'Qin County'}, {id:246,name:'Qinyuan County'},{id:247,name:'Lucheng City'}]},{id:18,name:'Jincheng City',district:[{id:248,name :'City'},{id:249,name:'Qinshui County'},{id:250,name:'Yangcheng County'},{id:251,name:'Lingchuan County'},{id :252,name:'Zezhou County'},{id:253,name:'Gaoping City'}]}]}];Xiangyuan County'},{id:239,name:'Tunliu County'},{id:240,name:'Pingshun County'},{id:241,name:'Licheng County'},{id:242 ,name:'Huguan County'},{id:243,name:'Zhangzi County'},{id:244,name:'Wuxiang County'},{id:245,name:'Qin County'}, {id:246,name:'Qinyuan County'},{id:247,name:'Lucheng City'}]},{id:18,name:'Jincheng City',district:[{id:248,name :'City'},{id:249,name:'Qinshui County'},{id:250,name:'Yangcheng County'},{id:251,name:'Lingchuan County'},{id :252,name:'Zezhou County'},{id:253,name:'Gaoping City'}]}]}];'Lingchuan County'},{id:252,name:'Zezhou County'},{id:253,name:'Gaoping City'}]}]}];'Lingchuan County'},{id:252,name:'Zezhou County'},{id:253,name:'Gaoping City'}]}]}];
</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 loop to determine whether it is the current
selected: false,
//The currently selected item in the selected address
nowFocusAdd:false,
info: adata
},
created: function () {
},
// define methods in the `methods` object
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);
// Click to select the current
this._inst(this.info);
this._inst(this.showCityList);
this._inst(this.showDistrictList);
this.info[index].selected = true;
},
provinceSelected: function() {
// clear city and district list
this.showCityList = false;
this.showDistrictList = false;
// clear city and district options
this.City = false;
this.District = false;
// switch options page
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);
// Select the current add 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;
// Select the current add active
this._inst(this.showDistrictList);
this.showDistrictList[index].selected = true;
// Close the popup layer after selecting the urban option
this.showChose = false;
},
districtSelected: function() {
this.showCity=false;
this.showDistrict = true;
},
//type is 0 means delete, type is 1 means add
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;
// Select the current add 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>