标签：province city vue area element filter item code ui

。

	    <el-select v-model="province" @change="changeProvince(province)" placeholder="请选择">
	      <el-option
	        v-for="item in provinceList"
	        :key="item.code"
	        :label="item.name"
	        :value="item.code">
	      </el-option>
	    </el-select>
		  <el-select v-model="city" @change="changeCity(city)" placeholder="请选择">
		    <el-option
		      v-for="item in cityList"
		      :key="item.code"
		      :label="item.name"
		      :value="item.code">
		    </el-option>
		  </el-select>
		    <el-select v-model="area" @change="changeArea(area)" placeholder="请选择">
		      <el-option
		        v-for="item in areaList"
		        :key="item.code"
		        :label="item.name"
		        :value="item.code">
		      </el-option>
		    </el-select>

		  changeProvince(province){
	       this.city=[]
		   this.area=[]
		   this.cityList =	this.provinceList.filter(item=>{
				return item.code === province
			})[0].children
		  },
		  changeCity(city){
           this.area=[] 
		   this.areaList =	this.cityList.filter(item=>{
		  				return item.code === city
		  			})[0].children			
		  },
		  changeArea(area){
			  console.log(this.province,this.city,this.area)
		  },

 主要思路是利用change事件将选中的值用filter层层过滤来得到下一级的值集

标签：province,city,vue,area,element,filter,item,code,ui
来源： https://blog.csdn.net/ice121314/article/details/122546954

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。