【Github】项目名：wl – tree – transfer：基于Vue和element – ui的树形穿梭框组件
一、项目简介
wl – tree – transfer是一个基于Vue.js和element – ui的树形穿梭框组件，功能类似于element – ui的transfer组件，但数据为树形结构。它可用于邮件通讯录，具有轻量、易用的特点，无需投入其他学习成本。项目已不再更新，和el – tree – transfer功能一样，也可在weilan – ui中找到它。
二、项目目的
由于公司业务使用vue框架，ui库使用的element – ui，在市面上找到好用的vue树形穿梭框组件较难，又不想因一个穿梭框在element – ui之外引入其他重量级插件，所以开发了wl – tree – transfer组件。
三、核心技术
该组件基于Vue.js和element – ui构建。在技术实现上，el – tree – transfer依赖的element – ui组件有Checkbox多选框、Button按钮和Tree树形控件。wl – tree – transfer组件功能类似，并且在其基础上进行了功能扩展与优化，例如各种功能参数的增加和事件回调机制的设定。
四、实践案例
项目给出了详细的使用示例。首先通过npm安装插件，如npminstall wl – tree – transfer — save或npmi wl – tree – transfer – S，然后引入组件import wl from “wl – tree – transfer”; import “wl – tree – transfer/lib/wl – tree – transfer.css”，再使用Vue.use(wl)。在中可以像使用普通组件一样使用wl – tree – transfer，如</wl – tree – transfer>。同时给出了众多参数、事件和slot的使用示例与说明，如不同模式下的操作、数据格式要求、事件触发的回调函数参数等。
五、项目总结
wl – tree – transfer组件功能丰富，涵盖了树形穿梭框多种功能需求，从基本的穿梭操作到各种复杂的交互逻辑（如拖拽、筛选、自定义节点等）都有涉及。其在基于Vue和element – ui框架的项目中有较好的应用价值，尤其适合需要树形穿梭框功能且不想引入过多外部插件的项目。欢迎大家在评论区留言讨论关于这个组件的使用心得或者遇到的问题。