Vue三级联动之保存已选地址

最新推荐文章于 2024-07-11 11:44:33 发布
程序员会武功
最新推荐文章于 2024-07-11 11:44:33 发布
阅读量1.4k
点赞数
分类专栏： vue 文章标签： Vue 三级联动可保存已选地址
本文链接：https://blog.csdn.net/qq_27099139/article/details/79990002
版权
vue 专栏收录该内容
2 篇文章
订阅专栏
本文介绍如何在Vue项目中实现三级联动选择，并详细讲解如何保存用户已选择的地址信息，提供了一个实用的前端解决方案。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
以前给别人完善过一个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>