el-tree-transfer
因业务需求需要用到一个穿梭框组件，而各大主流UI库和市面上的穿梭框都是一维数据，不支持树形结构的穿梭数据，
然后我自己就写了一个树形穿梭框组件，用户界面完全按照元素的UI风格。并且使用此插件时默认你已经引入了元素的用户界面的按钮，复选框，树组件！并且是一个VUE项目，你就可以像使用普通VUE组件一样使用它。
埃尔树转移
简介
el-tree-fransfer是一个基于VUE和element-ui的树形穿梭框组件，使用前请确认已经引入元素-ui！此组件功能类似于element-ui的转移组件，但是里面的数据是树形结构！实际上，el-tree-transfer依赖的element-ui组件分别是Checkbox多选框，Button按钮，和最主要的Tree树形控件写成！并非是在element-ui的穿梭框组件上的扩展，而仅仅是参照了其外观样式和功能。
因为公司业务使用VUE框架，UI库使用的元素的用户界面。在市面上找到一个好用的VUE树形穿梭框组件都很难，又不想仅仅因为一个穿梭框在元件的UI之外引入其他重量级插件，因此就有了EL-树转移。轻量，易用，无需投入其他学习成本。
注意！
第一层数据的pid请设定为0！
id推荐为字符串，但也可以是数字，请不要混用
快速上手
先NPM下载插件
npm install el-tree-transfer --save
或
npm i el-tree-transfer -S
然后你可以像使用普通组件一样使用EL-树转移
<template>
<div>
// 你的代码
...
// 使用树形穿梭框组件
<tree-transfer :from_data = 'fromData' :to_data = 'toData' @addBtn='add' @removeBtn='remove'></tree-transfer>
</div>
</template>
<script>
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(data){
conlose.log(data)
},
// 监听穿梭框组件移除
remove(data){
conlose.log(data)
}
},
comporents:{ treeTransfer } // 注册
}
</script>
<style>
...
</style>...
文档
参数：宽度说明：宽度类型：字符串必填：假默认：100％补充：建议在外部盒子设定宽度和位置
参数：高度说明：高度类型：字符串必填：假默认：320
参数：标题说明：标题类型：数组必填：假默认：[“源列表”，“目标列表”]
参数：BUTTON_TEXT说明：按钮名字类型：数组必填：假默认：空
参数：from_data说明：源数据类型：数组必填：true补充：数据格式同element-ui tree组件，但必须有id和pid
参数：to_data说明：目标数据类型：数组必填：真补充：数据格式同元素-ui树组件，但必须有ID和PID
参数：defaultProps说明：配置项-同el-tree中props必填：false补充：用法和el-tree的props一样
参数：node_key说明：自定义node-key的值，默认为id必填：false补充：必须与treedata数据内的id参数名一致，必须唯一
参数：pid说明：自定义pid的参数名，默认为"pid"必填：false补充：有网友提出后台给的字段名不叫pid，因此增加自定义支持
事件：addBtn说明：点击添加按钮时触发的事件回调参数：data为选中节点id
事件：removeBtn说明：点击移除按钮时触发的事件回调参数：data为选中节点id
版本说明
1.4.8版本修复了id为number类型时无法通过重复校验函数的问题，但仍然推荐id使用字符串型
1.4.7增加版本了
defaultProps参数，node_key参数，pid参数，主要作用为可以自定义一些重要字段名，来提高数据灵活性，避免和后台因为字段名不同而被祭天
1.3.7版本取消了对loadsh库的依赖，此前仅用此库做某些深拷贝处理