springboot+vue省市县街道地区四级联动-创新互联
springboot+vue省市县街道地区四级联动
网站题目:springboot+vue省市县街道地区四级联动-创新互联
URL链接:http://scyanting.com/article/iiiih.html
1. 级联选择器实现省市县街道四级联动1. 级联选择器实现省市县街道四级联动
目前累计服务客户上千多家,积累了丰富的产品开发及服务经验。以网站设计水平和技术实力,树立企业形象,为客户提供网站建设、成都网站制作、网站策划、网页设计、网络营销、VI设计、网站改版、漏洞修补等服务。成都创新互联始终以务实、诚信为根本,不断创新和提高建站品质,通过对领先技术的掌握、对创意设计的研究、对客户形象的视觉传递、对应用系统的结合,为客户提供更好的一站式互联网解决方案,携手广大客户,共同发展进步。2. 下拉框实现省市县街道四级联动
首先我们可以看到[Element ui](组件 | Element) 官网里的级联选择器的数据其实是树形的,所以我们可以在后端就把数据构造成树形结构的。有需要的小伙伴可以看我的另一篇博客:java–list转树形结构,这里就不再多讲。
1. 如果后台传过来的数据是树形结构的,那么我们直接绑定数据就可以了:
后台传过来的数据:
效果:
2.如果后台传过来的不是树形结构,那我们就要在前端把它构造成树形结构。
后台传过来的数据:
前端代码(主要代码是使用递归将扁平数据构造为树形数据):
效果:
至于为什么要判断根节点的children是否有值。如果不判断,就会出现children是一个空数组,对比下面两张图就知道了。
判断后:
没有判断:
如果后端返回的数据也是扁平数据,那么我们可以先筛选出省份数据(pid==0),在改变省份数据的时候,又筛选出市级数据,也就是市级的pid等于省级的id,以此内推即可;代码如下:
提交
效果:
解释得可能不是那么清楚,大家多多包涵!
你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧
网站题目:springboot+vue省市县街道地区四级联动-创新互联
URL链接:http://scyanting.com/article/iiiih.html