springboot+vue省市县街道地区四级联动

springboot+vue省市县街道地区四级联动

1. 级联选择器实现省市县街道四级联动

2. 下拉框实现省市县街道四级联动

1. 级联选择器实现省市县街道四级联动

​ 首先我们可以看到[Element ui](组件 | Element) 官网里的级联选择器的数据其实是树形的，所以我们可以在后端就把数据构造成树形结构的。有需要的小伙伴可以看我的另一篇博客：java–list转树形结构，这里就不再多讲。

1. 如果后台传过来的数据是树形结构的，那么我们直接绑定数据就可以了：

后台传过来的数据：

效果：

2.如果后台传过来的不是树形结构，那我们就要在前端把它构造成树形结构。

后台传过来的数据：

前端代码（主要代码是使用递归将扁平数据构造为树形数据）：

效果：

至于为什么要判断根节点的children是否有值。如果不判断，就会出现children是一个空数组，对比下面两张图就知道了。

判断后：

没有判断：

2. 下拉框实现省市县街道四级联动

​ 如果后端返回的数据也是扁平数据，那么我们可以先筛选出省份数据（pid==0），在改变省份数据的时候，又筛选出市级数据，也就是市级的pid等于省级的id，以此内推即可；代码如下：

效果：

解释得可能不是那么清楚，大家多多包涵!