一个基于vue和element-ui的树形穿梭框组件

#el-tree-transfervue

Tree-shaped shuttle box component for vue framework, can also be used for mail address book component.用于vue框架的树形穿梭框组件，也可用于邮件通信录组件。node

##简介·请先阅读文档及版本说明git

由于公司业务使用vue框架，ui库使用的element-ui。在市面上找到一个好用的vue树形穿梭框组件都很难，又不想仅仅由于一个穿梭框在element-ui以外引入其余重量级插件，所以就有了el-tree-transfer。轻量，易用，无需投入其余学习成本。github

el-tree-fransfer是一个基于VUE和element-ui的树形穿梭框组件，使用前请确认已经引入element-ui！此组件功能相似于element-ui的transfer组件，可是里面的数据是树形结构！实际上，el-tree-transfer依赖的element-ui组件分别是Checkbox 多选框，Button 按钮，和最主要的Tree 树形控件写成！并不是是在element-ui的穿梭框组件上的扩展，而仅仅是参照了其外观样式和功能。ui彻底按照element-ui风格。注意：使用此插件时默认你已经引入了element-ui的button，check-box，tree组件！ vuecli3版本npm

在线访问 - GitHub - NPM - SegmentFault - CSDN- 掘金

注意！ 2.2.0 版本增长lazy懒加载功能

注意！ 2.0.0 版本存在父子不关联错误，2.1.1 版本增长 arrayToTree 支持，但已是树形数据的请不要使用此参数

注意！ 1.9.0 版本加强id为数字型的匹配强度，1.9.7版本增长`defaultTransfer`属性用来知足用户不想将数据拆分红fromData和toData的需求

注意！ 1.8.9 版本修复一个节点既是一侧的枝干节点又是另外一侧的叶子节点时穿梭引发的重复错误！解决自定义节点名时筛选无效错误

注意！ 1.8.7 版本增长通信录模式，可经过 mode 字段配置模式

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

注意！ 1.5 以上版本改成自动处理

第一层数据的 pid 请设定为 0！！ id推荐为string，但也能够是number，请不要混用，id不能重复！element-ui

##快速上手segmentfault

先npm下载插件数组

npm install el-tree-transfer --savemarkdown

或app

npm i el-tree-transfer -S

而后你能够像使用普通组件同样使用el-tree-transfer

GitHub demo代码地址欢迎star 谢谢

<template>
    <div>
    // 你的代码
    ...
    // 使用树形穿梭框组件
    <tree-transfer :title="title" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}"             @addBtn='add' @removeBtn='remove' :mode='mode' height='540px' filter openAll>
    </tree-transfer>
  </div>
</template>  

<script>
import treeTransfer from 'el-tree-transfer' // 引入

   export defult {
    data(){
      return:{
        mode: "transfer", // transfer addressList
        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:{
      // 切换模式 现有树形穿梭框模式transfer 和通信录模式addressList
      changeMode() {
        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);
      }
    },
    comporents:{ treeTransfer } // 注册
  }

</script>


<style>
...
</style>
复制代码

文档

序号	参数	说明	类型	必填	可选值	默认值	补充
1	width	宽度	String	false	-	100%	建议在外部盒子设定宽度和位置
2	height	高度	String	false	-	320px	-
3	title	标题	String	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	Object	false	-	{ label: "label", children: "children", isLeaf: "leaf", disable: "disable" }	用法和el-tree的props同样
8	node_key	自定义node-key的值，默认为id	String	false	-	id	必须与treedata数据内的id参数名一致，必须惟一
9	pid	自定义pid的参数名，默认为"pid"	String	false	-	pid	有网友提出后台给的字段名不叫pid，所以增长自定义支持
10	leafOnly	废弃	-	-	-	-	-
11	filter	是否开启筛选功能	Boolean	false	-	false	根据defaultProps参数的label字段筛选
12	openAll	是否默认展开所有	Boolean	false	-	false	存在性能问题
13	~~renderContent~~ renderContentLeft, renderContentRight	自定义树节点，用法同element-ui tree	Function	false	-	-	2.2.3版本拆为两个函数分别定义左右两侧自定义节点
14	mode	设置穿梭框模式	String	false	transfer/addressList	transfer	mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改成通信录模式，通信录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值便可，addressList模式时标题默认为通信录、收件人、抄送人、密送人
15	transferOpenNode	穿梭后是否展开穿梭的节点	Boolean	false	-	true	默认为true即展开穿梭的节点，便于视觉查看，增长此参数是由于数据量大时展开会有明显卡顿问题，但注意，如此参数设置为false则穿梭后不展开，毕竟没法肯定第几层就会有庞大数据
16	defaultCheckedKeys	默认选中节点	Array	false	-	-	只匹配初始时默认节点，不会在你操做后动态改变默认节点
17	placeholder	设置搜索框提示语	String	false	-	输入关键词进行筛选	-
18	defaultTransfer	是否自动穿梭一次默认选中defaultCheckedKeys的节点	Boolean	false	-	false	用来知足用户不想将数据拆分红fromData和toData的需求
19	arrayToTree	是否开启一维数组转化为树形结构	Boolean	false	-	false	数据必须存在根节点，而且不会断节，数据格式详见github上app.vue，根据id、pid对应关系转化，存在必定的性能问题
20	addressOptions	通信录模式配置项	Object	false	-	{num: Number, suffix: String, connector: String}	num-> 所需右侧通信录个数,默认3 suffix-> label后想要拼接的字段（如id，即取此条数据的id拼接在后方）默认suffix connector -> 链接符（字符串）默认-
21	lazy	是否启用懒加载	Boolean	false	-	false	效果动el-tree懒加载，不可和openAll或默认展开同时使用
22	lazyFn	懒加载的回调函数	Function	true	-	-	当适用lazy时必须传入回调函数，示例:lazyFn='loadNode',返回参数loadNode(node, resolve, from), node->当前展开节点node，resolve->懒加载resolve，from -> left/right 表示回调来自左侧/右侧
23	high-light	是否高亮当前选中节点	Boolean	false	-	false	-
24	filterNode	自定义搜索函数	Function	false	-	-	不传则仍默认根据defaultProps参数的label字段筛选

序号	事件名称	说明	回调参数
1	addBtn	点击添加按钮时触发的事件	unction(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通信录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
2	removeBtn	点击移除按钮时触发的事件	function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通信录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
3	left-check-change	左侧源数据勾选事件	function(nodeObj, treeObj, checkAll)见el-tree组件check事件返回值, 新增checkAll参数表示是否所有选中
4	right-check-change	右侧目标数据勾选事件	function(nodeObj, treeObj, checkAll)见el-tree组件check事件返回值, 新增checkAll参数表示是否所有选中

序号	名字	说明
1	left-footer	穿梭框左侧、右侧底部slot
2	right-footer	穿梭框左侧、右侧底部slot
3	title-left	穿梭框标题区左侧、右侧自定义内容
4	title-right	穿梭框标题区左侧、右侧自定义内容

版本说明

2.2.3 拆分自定义树节点函数参数13 renderContent 为 renderContentLeft,renderContentRight分别定义左右两侧自定义节点函数；增长filterNode函数来自定义搜索

2.2.2 增长选中高亮参数

2.2.1 增长title处的全选事件，具体参数说明见事件3，事件4

2.2.0 增长lazy懒加载功能(非通信录模式)，具体参数说明见参数21, 参数22

2.1.2 增长通信录模式的可配置项，但做为非主要维护模式灵活度仍较低，具体参数说明见参数20

2.1.1 修复 array 数组模式选择根节点穿梭错误,废弃leafOnly参数，注意已是树结构的不要使用 arrayToTree 参数

2.1.0 增长 arrayTotree 参数，处理一维数组自动转化为所需树结构(详见参数 19,或github-app.vue)；修复穿梭后半选节点残留的问题；去除部分没必要要变量

2.0.2 增长标题头部 slot 自定义内容区

2.0.1 修复父子不关联问题。

2.0.0 版本增长穿梭框左侧、右侧数据勾选事件，穿梭框左侧、右侧底部 slot。

1.9.8 版本修复自定义按钮button_text的报错。

1.9.7 版本增长defaultTransfer属性用来知足用户不想将数据拆分红fromData和toData的需求，增长placeholder属性。

1.9.0 加强 id 既有数字又有字符型时的正则匹配强度。

1.8.9 版本修复一个节点既是一侧的枝干节点又是另外一侧的叶子节点时穿梭引发的重复错误！解决自定义节点名时筛选无效错误。

1.8.8 版本增长transferOpenNode参数用来管理穿梭后是否展开节点，defaultCheckedKeys用来设置初始时默认展开节点。

1.8.7 版本增长通信录模式，可经过 mode 字段配置模式，mode 字段可选值为transfer|addressList。

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库的依赖，此前仅用此库作某些深拷贝处理

旧版文档

参数：width 说明：宽度 类型：String 必填：false 默认：100% 补充：建议在外部盒子设定宽度和位置
参数：height 说明：高度 类型：String 必填：false 默认：320px
参数：title 说明：标题 类型：Array 必填：false 默认：["源列表", "目标列表"]
参数：button_text 说明：按钮名字 类型：Array 必填：false 默认：空
参数：from_data 说明：源数据 类型：Array 必填：true 补充：数据格式同element-ui tree组件，但必须有id和pid
参数：to_data 说明：目标数据 类型：Array 必填：true 补充：数据格式同element-ui tree组件，但必须有id和pid
参数：defaultProps 说明：配置项-同el-tree中props 必填： false 补充：用法和el-tree的props同样
参数：node_key 说明：自定义node-key的值，默认为id 必填：false 补充：必须与treedata数据内的id参数名一致，必须惟一
参数：pid 说明：自定义pid的参数名，默认为"pid" 必填：false 补充：有网友提出后台给的字段名不叫pid，所以增长自定义支持
参数：leafOnly 说明：是否只返回叶子节点 类型：Boolean 必填：false 补充：默认false，若是你只须要返回的末端子节点可以使用此参数
参数：filter 说明：是否开启筛选功能 类型：Boolean 必填：false
参数：openAll 说明：是否默认展开所有 类型：Boolean 必填：false
参数：renderContent 说明：自定义树节点 类型：Function 必填：false 补充：用法同element-ui tree
参数：mode 说明：设置模式，字段可选值为transfer|addressList 类型：String 必填：false 补充：mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改成通信录模式，通信录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值便可，addressList模式时标题默认为通信录、收件人、抄送人、密送人
参数：transferOpenNode 说明：穿梭后是否展开穿梭的节点 类型：Boolean 必填：false 补充：默认为true即展开穿梭的节点，便于视觉查看，增长此参数是由于数据量大时展开会有明显卡顿问题，但注意，如此参数设置为false则穿梭后不展开，毕竟没法肯定第几层就会有庞大数据
参数：defaultCheckedKeys 说明：默认展开节点 类型：Array 必填：false 补充：只匹配初始时默认节点，不会在你操做后动态改变默认节点
参数：placeholder 说明：设置搜索框提示语 类型：String 必填：false 补充：默认为请输入关键词进行筛选
参数：defaultTransfer 说明：是否自动穿梭一次默认选中defaultCheckedKeys的节点 类型：Boolean 必填：false 补充：默认false，用来知足用户不想将数据拆分红fromData和toData的需求
参数：arrayToTree 说明：是否开启一维数组转化为树形结构 类型：Boolean 必填：false 补充：数据必须存在根节点，而且不会断节，数据格式详见github上app.vue，根据id、pid对应关系转化，存在必定的性能问题
参数：addressOptions 说明：通信录模式配置项{num: Number, suffix: String, connector: String} 类型：Object 必填：false 补充：num-> 所需右侧通信录个数,默认3 suffix-> label后想要拼接的字段（如id，即取此条数据的id拼接在后方）默认suffix connector -> 链接符（字符串）默认-
参数：lazy 说明：是否启用懒加载 类型：Boolean 必填：false 补充：默认false，效果动el-tree懒加载，不可和openAll或默认展开同时使用
参数：lazyFn 说明：懒加载的回调函数 类型：Function 必填：true 补充：当适用lazy时必须传入回调函数，示例:lazyFn='loadNode',返回参数loadNode(node, resolve, from), node->当前展开节点node，resolve->懒加载resolve，from -> left|right 表示回调来自左侧|右侧
事件：addBtn 说明：点击添加按钮时触发的事件 回调参数：function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通信录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
事件：removeBtn 说明：点击移除按钮时触发的事件 回调参数：function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通信录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
事件：left-check-change 说明：左侧源数据勾选事件 回调参数：function(nodeObj, treeObj)见el-tree组件check事件返回值
事件：right-check-change 说明：右侧目标数据勾选事件 回调参数：function(nodeObj, treeObj)见el-tree组件check事件返回值
Slot：left-footer, right-footer 说明：穿梭框左侧、右侧底部slot
Slot: title-left, title-right 说明：穿梭框标题区左侧、右侧自定义内容