el-tree-transfer：基于Vue和element-ui的树形穿梭框及邮件通讯录

【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。例如：

<template><div>//你的代码…//使用树形穿梭框组件<tree – transfer:title=”title”:from_data=’fromData’:to_data=’toData’:defaultProps=”{label:’label’}”@add – btn=’add’@remove – btn=’remove’:mode=’mode’height=’540px’filteropenAll></tree – transfer></div></template><script>importtreeTransferfrom’el – tree – transfer’;exportdefult{data(){return:{mode:”transfer”,//transferaddressListfromData:[{id:”1″,pid:0,label:”一级1″,children:[{id:”1 – 1″,pid:”1″,label:”二级1 – 1″,disabled:true,children:[]},{id:”1 – 2″,pid:”1″,label:”二级1 – 2″,children:[{id:”1 – 2 – 1″,pid:”1 – 2″,children:[],label:”二级1 – 2 – 1″},{id:”1 – 2 – 2″,pid:”1 – 2″,children:[],label:”二级1 – 2 – 2″}]}]},],toData:[]}},methods:{//切换模式现有树形穿梭框模式transfer和通讯录模式addressListchangeMode(){if(this.mode==”transfer”){this.mode=”addressList”;}else{this.mode=”transfer”;}},//监听穿梭框组件添加add(fromData,toData,obj){//树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象//通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表console.log(“fromData:”,fromData);console.log(“toData:”,toData);console.log(“obj:”,obj);},//监听穿梭框组件移除remove(fromData,toData,obj){//树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象//通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表console.log(“fromData:”,fromData);console.log(“toData:”,toData);console.log(“obj:”,obj);}},components:{treeTransfer}//注册}</script><style>…</style>

组件参数

组件有众多参数，如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用户提供了一个方便的树形穿梭框解决方案，尤其是在处理树形结构数据的穿梭和通讯录相关功能时。其不断更新迭代，功能日益完善。欢迎大家留言讨论关于这个组件的使用心得或者遇到的问题等。

项目地址

GitHub链接直达