【Github】项目名：el – tree – transfer：基于Vue和element – ui的树形穿梭框及邮件通讯录
项目简介
el – tree – transfer是一个基于Vue和element – ui的树形穿梭框组件。它类似于element – ui的transfer组件，但数据是树形结构。此组件依赖element – ui的Checkbox多选框、Button按钮和Tree树形控件，并非在element – ui的穿梭框组件上扩展，只是参照其外观样式和功能。由于业务使用vue框架和element – ui库，且市面上好用的vue树形穿梭框组件难寻，又不想引入其他重量级插件，所以有了这个轻量、易用且无需额外学习成本的组件。
重要更新
2.4.6版本修复重构错误（请勿使用2.4.0 – 2.4.5）；增加父子不关联的三种模式(其中完成授权模式)；调整组件目录结构；重构穿梭算法，demo数据粗略测试性能提升较大；优化父子不关联时全选；修改事件addBtn为add – btn，removeBtn为remove – btn；增加拖拽；增加自定义节点slot；修复左右同时选中穿梭两次后的数据消失；搜索框增加清空；增加父子不关联穿梭功能。
快速上手
先通过npm下载插件：npminstallel – tree – transfer–save或npmiel – tree – transfer – S。然后可以像使用普通组件一样使用el – tree – transfer。例如：
组件参数
组件有众多参数，如width（宽度，默认100%）、height（高度，默认320px）、title（标题，默认[“源列表”,”目标列表”]）、button_text（按钮名字）、from_data（源数据）、to_data（目标数据）、defaultProps（配置项）等，每个参数都有其特定的类型、默认值和用途。
事件
包含add – btn（点击添加按钮时触发）、remove – btn（点击移除按钮时触发）、left – check – change（左侧源数据勾选事件）、right – check – change（右侧目标数据勾选事件）等事件，不同模式下各事件的回调参数有所不同。
项目总结
el – tree – transfer组件为Vue和element – ui用户提供了一个方便的树形穿梭框解决方案，尤其是在处理树形结构数据的穿梭和通讯录相关功能时。其不断更新迭代，功能日益完善。欢迎大家留言讨论关于这个组件的使用心得或者遇到的问题等。