• 多选穿梭框总结 (vue + element)


    博客地址:https://ainyi.com/23

     

    示例

    示例

    介绍

    • 实现省市区三级多选联动,可任选一个省级、市级、区级,加入已选框,也可以在已选框中删除对应的区域。
    • 选择对应仓库,自动勾选仓库对应的省,取消就反选
    • 选择同样地区,选择省级或市级,若该对象下面的市级或区级已有选择,就自动合并为一个省级或市级:
    例如:
    已选择:广东省广州市荔湾区
    点击加入:广东省广州市
    最后显示:广东省广州市
    广州市已被选择,对应市级的区将不显示,只显示对应的市
    
    同理:选择广东省,也将下面已选择的所有的市或区合并成一个省级,只显示这个省级

    设计

    • 拆分组件:仓库和省市区框作为父组件
    • 三个区域框和一个已选框相似,复用一个组件 transfer,放在省市区框父组件中。

    省级 transfer、市级 transfer、区级 transfer

    数据展示

    • 父组件从数据中获取省级数据传递到子组件 transfer 展示出来。

    • 当选中的某个省,则传递对应省级 id 到父组件,根据 id 查找对应的市级并过滤,并且使用 ref 控制市级的 transfer 组件的 father 属性,就是在市级 transfer 组件里也有对应的省级对象。

    • 多选情况,只保留最后选择的父级(省级/市级)查找出对应的子级(市级/区级)

    • 市级和省级组件的 father 对象是 {id:"", text:""}

    • 市级组件的 father 保存着省级的 id 和名称。

    • 区级组件的 father 保存着省市的 id 和名称(以-分割,如:{id:"10001-100145815", text:"广东省-河源市"})

    • 省市区都分别设置一个过滤数组,用来过滤已选的区域

    区域搜索

    • 监听搜索框的值,重新获取区域数据,再通过 filter 筛选出搜索的数据

    点击添加进已选:

    • 省级直接点击添加选中的省份,直接传递该省的对象进已选数组。并将选择的省级 id 添加进省级过滤数组。然后判断已选区域中是否有该省级一下的市级,有则删除,合并成一个省级,并在省级过滤数组删除掉这个市级 id。

    • 市级点击添加选中的城市,选中的城市对象数组,遍历拼接上当前的 father 对象,最终保存的形式:{id: "10005-545132025515", text: "广东省-广州市"},也要判断当前市级下是否有对应的区级,有则合并,并在区级过滤数组删除这个区级 id。

    • 区级点击添加选中的区域,拼接上当前的 father 对象,最终的保存的形式:{id:"10004-15613610-25156165156321", text:"广东省-河源市-龙川县"},

    • 子组件 transfer 中区域数据 districtList 需要放在监听器里,当点击省级或市级,自动监听更新市级或区级的列表

    从已选中删除

    • 选中已选区域的数据,传递到父组件,同样的道理,删除过滤数组对应的 id,并刷新对应的区域数据

    监听仓库与区域对应

    • 找出选中仓库的对应省级 id,已选区域有该省则过滤,无则添加,当点击取消勾选的时候,也实时将已选区域中对应的省级删除掉。

    相关连接

  • 相关阅读:
    课程安排及脉络
    面向对象 魔法方法 单例(五)
    练习项目:选课系统
    面向对象 多态 类方法 反射 (四)
    面向对象(三) 组合 封装
    面向对象编程(二)
    面向对象编程(一)
    python入门总复习
    模块(四)
    模块(三)
  • 原文地址:https://www.cnblogs.com/ainyi/p/9335647.html
Copyright © 2020-2023  润新知