最近在做一个省市区街道联动的功能，使用的是 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('')}
🌈 最后希望这篇文章能够帮到你!!!
⭐️扩展阅读:
浅析 v-node 👉 猛戳这里vue2 响应式原理 👉 猛戳这里浅析 keep-alive 👉 猛戳这里浅析 computed👉 猛戳这里
