示例
介绍
实现省市区三级多选联动,可任选一个省级、市级、区级,加入已选框,也可以在已选框中删除对应的区域。
选择对应仓库,自动勾选仓库对应的省,取消就反选
选择同样地区,选择省级或市级,若该对象下面的市级或区级已有选择,就自动合并为一个省级或市级:
例如:
已选择:广东省广州市荔湾区
点击加入:广东省广州市
最后显示:广东省广州市
广州市已被选择,对应市级的区将不显示,只显示对应的市
同理:选择广东省,也将下面已选择的所有的市或区合并成一个省级,只显示这个省级
设计
拆分组件:仓库和省市区框作为父组件
三个区域框和一个已选框相似,复用一个组件 transfer,放在省市区框父组件中。
省级 transfer、市级 transfer、区级 transfer
数据展示
父组件从数据中获取省级数据传递到子组件 transfer 展示出来。
当选中的某个省,则传递对应省级 id 到父组件,根据 id 查找对应的市级并过滤,并且使用 ref 控制市级的 transfer 组件的 father 属性,就是在市级 transfer 组件里也有对应的省级对象