Element 级联组件实现省市区街道联动

最近在做一个省市区街道联动的功能，使用的是 Element 级联组件，现将自己的思路和问题记录一下，有对直辖市、港澳台数据的处理，大佬们有更好的建议可以留言哦! 话不多说，直接上菜。

先看下效果👇：

⭐️ 接口数据，小伙伴们可以根据后端返回数据做相应处理。博主这边做的是全国的切换，数据量比较大，需要分级去获取，如下图所示：

🌈 了解了接口数据，那么接下来就是需要去做 Element 级联组件啦😄!

Element 级联组件 戳这里

<el-cascader 
	v-model="regionCheckeds" //绑定选中项
	:options="regionData" //需要渲染的数据
	:props="regionProps" //对选项的配置
	placeholder="请选择" 
	clearable filterable>
</el-cascader>

接下来就是去获取数据,首次获取全国省份数据，每次选中一项，往 regionCheckeds 添加一项，监听regionCheckeds变化，获取下一级数据，并处理好赋值给regionData

// 一些伪代码
async getRegionData() {
   const responce = await getData();
   // 判断当前的数据拿的是 省市区，将数据组装到对应选中项的 children 属性中
   if(regionCheckeds.length === 0){
   	// 当前获取的是省份
   	this.regionData = responce.list;
   }else if(this.regionCheckeds.length === 1){
   	// 当前获取的是市
   	// 则需要找到当前省份，并将数据添加到 children 属性中
   	this.regionData.find(id => id === this.regionCheckeds[0]).children = list;
   }
   // ... 依次类推
}


// 监听 regionCheckeds 变化，处理好参数，获取下一级数据
watch:{
    regionCheckeds(){
    	// 一些其他逻辑处理
    	// 重新调用接口获取数据
    	this.getRegionData()
    }
}

⭐️ 最后就是回显，本质上就是去找到选中的 regionCheckeds 值。

你以为这样就结束了！！！直辖市呢？？？

💪 对于直辖市有多种处理办法，博主提供一种解决办法，当在选中项是直辖市或港澳台的时候，在watch 里面的 regionCheckeds 添加一个空字符串 ，这样当选中北京市（相当于省份），就直接跳过城市一级，去获取区一级，来上菜👇：

if (直辖市 || 港澳台) {
  this.regionCheckeds.concat('')
}

🌈 最后希望这篇文章能够帮到你!!!

⭐️扩展阅读:

1. 浅析 v-node 👉 猛戳这里
2. vue2 响应式原理 👉 猛戳这里
3. 浅析 keep-alive 👉 猛戳这里
4. 浅析 computed👉 猛戳这里