wex5 实战 省市县三级联动与地址薄同步

时间:2022-08-24 13:45:08

无论是商城,还是快递,都要用到省市县三级联动,和地址薄,今天就以实战来制作,难点有3个:

1:三级联动,有wex5组件实现,相对简单,实战里对行数据进行了拼接

2:  地址薄选项,利用inputSelect的下接属性,装载地址列表。

3:地址薄页面与信息页面的下拉数据同步

一 效果演示:

wex5  实战 省市县三级联动与地址薄同步

wex5  实战 省市县三级联动与地址薄同步

wex5  实战 省市县三级联动与地址薄同步

二  设计思路:

三级联动用组件,把地址信息重新拼接,用下垃组件显示详细地址,用modelParamsReceive的实时性保证不同页面跳转后的数据同步

三  数据库设计:

wex5  实战 省市县三级联动与地址薄同步

(注)三级联动,省,市,县,供组件绑定。街,地址,详细地址,由前端写入。

四   三级联动

1  组件选用

wex5  实战 省市县三级联动与地址薄同步

provinceSelect 省

citySelect  市

districtSelect 县

2 字段绑定

wex5  实战 省市县三级联动与地址薄同步

3   联动方法(分级过滤)

省过滤市

wex5  实战 省市县三级联动与地址薄同步

市过滤县

wex5  实战 省市县三级联动与地址薄同步

4  地址详情拼接

wex5  实战 省市县三级联动与地址薄同步

这里拼接,是为了在地址选项里完整的显示地址全部信息。否则只能先择单一省,或市字段。如果再用json拼接或data装载,代码量增加,不利于写入到快递单地址字段中。这里的冗余字段,优化代码写作。

五  多页面数据同步

地址增删改查完成后,回到信息页,问题来了,地址没有刷新。

除非重新装载web,这时的多页面数据同步非常重要。

这里用modelParasRecive的实时来触发data刷新实现。

1 信息页传参

wex5  实战 省市县三级联动与地址薄同步

打开地址页之前,把父页传过去。在不同的页面打开地址页,让地址页返回到当前页。

2  地址页接参

wex5  实战 省市县三级联动与地址薄同步

接收父页面信息

3  地址页关闭

传到父页面一个uuid

4  信息页接参并触发data刷新

wex5  实战 省市县三级联动与地址薄同步

uuid是不会重复的,只要接参不一致,触发地址data刷新,两个页面时的地址信息进行了刷新。

六  总结

1    三级联动不难,关键是行处理

2  多页面同步,用madelParamsRecive触发实现