el-tree-transfer

因业务需求需要用到一个穿梭框组件，而各大主流UI库和市面上的穿梭框都是一维数据，不支持树形结构的穿梭数据，

然后我自己就写了一个树形穿梭框组件，用户界面完全按照元素的UI风格。并且使用此插件时默认你已经引入了元素的用户界面的按钮，复选框，树组件！并且是一个VUE项目，你就可以像使用普通VUE组件一样使用它。

el-tree-fransfer

简介

el-tree-fransfer是一个基于VUE和element-ui的树形穿梭框组件，使用前请确认已经引入元素-ui！此组件功能类似于element-ui的转移组件，但是里面的数据是树形结构！实际上，el-tree-transfer依赖的element-ui组件分别是Checkbox多选框，Button按钮，和最主要的Tree树形控件写成！并非是在element-ui的穿梭框组件上的扩展，而仅仅是参照了其外观样式和功能。

因为公司业务使用VUE框架，UI库使用的元素的用户界面。在市面上找到一个好用的VUE树形穿梭框组件都很难，又不想仅仅因为一个穿梭框在元件的UI之外引入其他重量级插件，因此就有了EL-树转移。轻量，易用，无需投入其他学习成本。

在线访问

注意！ 1.7.7版本移动事件参数调整，直接返回移动后的fromData数据和toData数据。

注意! （1.5版本以上会自动处理）

第一层数据的 pid 请设定为 0！！

id推荐为string，但也可以是number，请不要混用，id不能重复！

快速上手

先NPM下载插件

npm install el-tree-transfer --save

或

npm i el-tree-transfer -S

然后你可以像使用普通组件一样使用el-tree-transfer 

// 你的代码 ... // 使用树形穿梭框组件

import treeTransfer from 'el-tree-transfer' // 引入 export defult { data(){ return:{ fromData:[ { id: "1", pid: 0, label: "一级 1", children: [ { id: "1-1", pid: "1", label: "二级 1-1", 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:{ // 监听穿梭框组件添加 add(fromData,toData,obj){ conlose.log('fromData',fromData); conlose.log('toData',toData); conlose.log('obj',obj); }, // 监听穿梭框组件移除 remove(fromData,toData,obj){ conlose.log('fromData',fromData); conlose.log('toData',toData); conlose.log('obj',obj); } }, comporents:{ treeTransfer } // 注册 } ...

...

文档

1. 参数：`width` 说明：`宽度` 类型：`String` 必填：`false` 默认：`100%` 补充：`建议在外部盒子设定宽度和位置`

2.  参数：`height` 说明：`高度` 类型：`String` 必填：`false` 默认：`320px`

3.  参数：`title` 说明：`标题` 类型：`Array` 必填：`false` 默认：`["源列表", "目标列表"]`

4.  参数：`button_text` 说明：`按钮名字` 类型：`Array` 必填：`false` 默认：`空`

5.  参数：`from_data` 说明：`源数据` 类型：`Array` 必填：`true` 补充：`数据格式同element-ui tree组件，但必须有id和pid`

6.  参数：`to_data` 说明：`目标数据` 类型：`Array` 必填：`true` 补充：`数据格式同element-ui tree组件，但必须有id和pid`

7.  参数：`defaultProps` 说明：`配置项-同el-tree中props` 必填： `false` 补充：`用法和el-tree的props一样`

8.  参数：`node_key` 说明：`自定义node-key的值，默认为id` 必填：`false` 补充：`必须与treedata数据内的id参数名一致，必须唯一`

9.  参数：`pid` 说明：`自定义pid的参数名，默认为"pid"` 必填：`false` 补充：`有网友提出后台给的字段名不叫pid，因此增加自定义支持`

10. 参数：`leafOnly` 说明：`是否只返回叶子节点` 类型：`Boolean` 必填：`false` 补充：`默认false，如果你只需要返回的末端子节点可使用此参数`

11. 参数：`filter` 说明：`是否开启筛选功能` 类型：`Boolean` 必填：`false`

12. 参数：`openAll` 说明：`是否默认展开全部` 类型：`Boolean` 必填：`false`

13. 参数：`renderContent` 说明：`自定义树节点` 类型：`Function` 必填：`false` 补充：`用法同element-ui tree`

14. 事件：`addBtn` 说明：`点击添加按钮时触发的事件` 回调参数：`keys:data为选中节点id,nodes:data为选中节点`

15. 事件：`removeBtn` 说明：`点击移除按钮时触发的事件` 回调参数：`keys:data为选中节点id,nodes:data为选中节点`

版本说明

1.7.7 版本 `addBtn` 和 `removeBtn` 事件参数调整，返回三个参数，第一个参数是移动后的fromData数据，第二个参数是移动后的toData数据，第三个参数是{keys, nodes, harfKeys, harfNodes}对象。增加 `renderContent` 参数支持树节点自定义。

1.6.7 版本增加`filter,openAll`参数，来设置是否开启筛选和是否默认展开全部

1.5.9版本增加`leafOnly`参数，来设置是否只返回树的末端叶子节点

1.5.8版本恢复上个版本莫名删掉的返回` nodes `的代码，如果您的项目只需要穿梭的node-key值则无需更新！道歉ing。。。

1.5.7版本修复子组件异步数据有时不会更新的问题！修复了自定义参数名node_key,children时的一个错误，自动把第一层数据的pid替换为0

1.4.9版本增加了添加和移除按钮的回调参数，function(keys,nodes)第一个参数为选中节点node-key值，第二个参数为选中节点node

1.4.8 版本修复了id为number类型时无法通过重复校验函数的问题，但仍然推荐id使用string型

1.4.7增加版本了defaultProps参数，node_key参数，pid参数，主要作用为可以自定义一些重要字段名，来提高数据灵活性，避免和后台因为字段名不同而被祭天

1.3.7版本取消了对loadsh库的依赖，此前仅用此库做某些深拷贝处理