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

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

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

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

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

 一 效果演示：

       

     

二  设计思路：

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

三  数据库设计：

     

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

   四   三级联动

         1  组件选用 

             

                 provinceSelect 省

                 citySelect  市

                districtSelect 县

         2 字段绑定

            

        3   联动方法（分级过滤）

              省过滤市

              

         市过滤县

          

     4  地址详情拼接

        

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

 

五  多页面数据同步

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

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

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

     1 信息页传参

         

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

   2  地址页接参

        

       接收父页面信息

   3  地址页关闭

       

       传到父页面一个uuid

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

      

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

六  总结

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

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

相关视频制作完成，上传优酷。教学app制作中。我是邯郸戏曲开发，tel：15175073123,qq:1017945251

 

 

 扫描二维码，看高清教学视频。