vue+element-ui实现全国城市三级联动(省市区)

vue+element-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层层过滤来得到下一级的值集

上一篇:electron例子 | 发送数据


下一篇:三分钟教你用 Scarlet 写一个 WebSocket App