hql7 / tree-transfer

一个基于vue和element-ui的树形穿梭框及邮件通讯录。A tree shaped shuttle box assembly based on Vue and element-ui. Vuecli3版本见https://github.com/hql7/wl-tree-transfer 示例见->

el-tree-transfer

简介

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

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

文档地址 - 在线访问 - GitHub - 掘金

重要更新

2.4.6 修复重构错误（请勿使用2.4.0-2.4.5）；增加父子不关联的三种模式(其中完成授权模式)；调整组件目录结构；重构穿梭算法，demo数据粗略测试性能提升较大；优化父子不关联时全选；修改事件addBtn为add-btn，removeBtn为remove-btn；增加拖拽；增加自定义节点slot；修复左右同时选中穿梭两次后的数据消失；搜索框增加清空；增加父子不关联穿梭功能

2.3.3 修改穿梭匹配逻辑；增加rootPidValue参数。详细说明见下方版本说明

快速上手

先 npm 下载插件

npm install el-tree-transfer --save

或

npm i el-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' 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",
                    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 和通讯录模式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);
          }
        },
        components:{ treeTransfer } // 注册
      }
    </script>

    <style>
    ...
    </style>

文档

序号	参数	说明	类型	默认值	补充
1	width	宽度	String	100%	建议在外部盒子设定宽度和位置
2	height	高度	String	320px	-
3	title	标题	String	["源列表", "目标列表"]	-
4	button_text	按钮名字	Array	-	-
5	from_data	源数据	Array	-	数据格式同element-ui tree组件，但必须有id和pid
6	to_data	目标数据	Array	-	数据格式同element-ui tree组件，但必须有id和pid
7	defaultProps	配置项-同el-tree中props	Object	{ label: "label", children: "children", isLeaf: "leaf", disable: "disable" }	用法和el-tree的props一样
8	node_key	自定义node-key的值，默认为id	String	id	必须与treedata数据内的id参数名一致，必须唯一
9	pid	自定义pid的参数名，默认为"pid"	String	pid	有网友提出后台给的字段名不叫pid，因此增加自定义支持
10	leafOnly	废弃	-	-	-
11	filter	是否开启筛选功能	Boolean	false	根据defaultProps参数的label字段筛选
12	openAll	是否默认展开全部	Boolean	false	存在性能问题
13	renderContent renderContentLeft, renderContentRight	自定义树节点， 用法同element-ui tree	Function	-	2.2.3版本拆为两个函数分别定义左右两侧自定义节点
14	mode	设置穿梭框模式	String	transfer	mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人
15	transferOpenNode	穿梭后是否展开穿梭的节点	Boolean	true	默认为true即展开穿梭的节点，便于视觉查看，增加此参数是因为数据量大时展开会有明显卡顿问题，但注意，如此参数设置为false则穿梭后不展开，毕竟无法确定第几层就会有庞大数据
16	defaultCheckedKeys	默认选中节点	Array	false	只匹配初始时默认节点，不会在你操作后动态改变默认节点
17	placeholder	设置搜索框提示语	String	输入关键词进行筛选	-
18	defaultTransfer	是否自动穿梭一次默认选中defaultCheckedKeys的节点	Boolean	false	用来满足用户不想将数据拆分成fromData和toData的需求
19	arrayToTree	是否开启一维数组转化为树形结构	Boolean	false	数据必须存在根节点，并且不会断节，数据格式详见github上app.vue，根据id、pid对应关系转化，存在一定的性能问题
20	addressOptions	通讯录模式配置项	Object	{num: Number, suffix: String, connector: String}	num-> 所需右侧通讯录个数,默认3 suffix-> label后想要拼接的字段（如id，即取此条数据的id拼接在后方）默认suffix connector -> 连接符（字符串）默认-
21	lazy	是否启用懒加载	Boolean	false	效果动el-tree懒加载，不可和openAll或默认展开同时使用
22	lazyFn	懒加载的回调函数	Function	-	当适用lazy时必须传入回调函数，示例:lazyFn='loadNode',返回参数loadNode(node, resolve, from), node->当前展开节点node，resolve->懒加载resolve，from -> left/right 表示回调来自左侧/右侧
23	high-light	是否高亮当前选中节点	Boolean	false	-
24	filterNode	自定义搜索函数	Function	-	不传则仍默认根据defaultProps参数的label字段筛选
25	defaultExpandedKeys	默认展开节点	Array	-	要展开的节点id数组，会自动去重生效在左右两侧
26	lazyRight	2.2.9 版本lazy属性只对左侧树生效，如果需要右侧也是用懒加载->lazyRight	Boolean	-	-
27	sjr	通讯录模式，设置右侧收件人数据	Array	-	-
28	csr	通讯录模式，设置右侧抄送人数据	Array	-	-
29	msr	通讯录模式，设置右侧密送人数据	Array	-	-
30	rootPidValue	穿梭框模式，根节点数据pid的值，用于匹配退出循环，重要	String,Number	0	-
31	checkStrictly	是否父子不关联	Boolean	false	此模式不支持lazy，返回的fromData和toData是最新数据，obj里面的keys，nodes不完整。且对删空子节点后的父节点左右两边处理逻辑有差异：当授权时既然要在右边出现，必然需要左侧父节点，而删除授权时，移除子权限并不代表想移除父权限
32	renderAfterExpand	是否在第一次展开某个树节点后才渲染其子节点	Boolean	true	-
33	expandOnClickNode	是否在点击节点的时候展开或者收缩节点	Boolean	true	-
34	checkOnClickNode	是否在点击节点的时候选中节点	Boolean	false	-
35	indent	相邻级节点间的水平缩进，单位为像素	Number	16	-
36	icon-class	自定义树节点的图标	String	-	-
37	draggable	是否开启拖拽节点功能	Boolean	false	-
38	allow-drag	判断节点能否被拖拽	Function(node)	-	-
39	allow-drop	拖拽时判定目标节点能否被放置	Function(draggingNode, dropNode, type)	-	type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
40	checkStrictlyType	父子不关联的三种模式:authorization授权模式,puppet木偶模式modular积木模式	String	authorization:左侧选择子节点自动带着父节点；右侧选择父节点自动带着子节点；此模式两侧可能存在相同的非叶子节点;puppet:纯父子不关联穿梭，但要保持完整的树形结构，只自动带上穿梭到对面拼接所需的骨架结构；此模式两侧可能存在相同的非叶子节点;modular纯父子不关联穿梭，也不保持完整的树形结构，像积木一样右侧要形成树形则需要把左侧拆除，左侧拆的越多右侧形成的树结构越完整；此模式左右两侧保证严格的唯一性

---

事件

序号	事件名称	说明	回调参数
1	add-btn	点击添加按钮时触发的事件(2.4.0以前为addBtn)	function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
2	remove-btn	点击移除按钮时触发的事件(2.4.0以前为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参数表示是否全部选中
5	node-drag-start	节点开始拖拽时触发的事件	共3个参数，依次为："left"/"right"、被拖拽节点对应的 Node、event
6	node-drag-enter	拖拽进入其他节点时触发的事件	共4个参数，依次为："left"/"right"、被拖拽节点对应的 Node、所进入节点对应的 Node、event
7	node-drag-leave	拖拽离开某个节点时触发的事件	共4个参数，依次为："left"/"right"、被拖拽节点对应的 Node、所离开节点对应的 Node、event
8	node-drag-over	在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）	共4个参数，依次为："left"/"right"、被拖拽节点对应的 Node、当前进入节点对应的 Node、event
9	node-drag-end	拖拽结束时（可能未成功）触发的事件	共5个参数，依次为："left"/"right"、被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event
10	node-drop	拖拽成功完成时触发的事件	共5个参数，依次为："left"/"right"、被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event

---

方法

序号	名称	说明
1	clearChecked	清除选中节点，默认清除全部 type：string left左边 right右边 all全部 默认all
2	getChecked	获取选中数据
3	setChecked	设置选中数据 function(leftKeys = [], rightKeys = [])
4	clearFilter	清除搜索框条件，默认清除全部 function(type: String) left左边 right右边 all全部 默认all

---

slot

序号	名字	说明
1	left-footer	穿梭框左侧、右侧底部slot
2	right-footer	穿梭框左侧、右侧底部slot
3	title-left	穿梭框标题区左侧、右侧自定义内容
4	title-right	穿梭框标题区左侧、右侧自定义内容
5	form	左侧内容区上部slot
6	to	右侧内容区上部slot
7	content-left	自定义左侧树节点
8	content-right	自定义右侧树节点

版本说明

2.4.6 修复重构错误（请勿使用2.4.0-2.4.5）；增加父子不关联的三种模式(其中完成授权模式)；调整组件目录结构；重构穿梭算法，demo数据粗略测试性能提升较大；优化父子不关联时全选；修改事件addBtn为add-btn，removeBtn为remove-btn；增加拖拽；增加自定义节点slot；修复左右同时选中穿梭两次后的数据消失；搜索框增加清空；增加父子不关联穿梭功能

2.3.3 更改判断穿梭目标是否已在对面存在的算法，避免原来str正则意外匹配结果（如children和list两个字段里都有这个id，穿梭移除后，children里的数据没了，list里面数据还在，此时原来的匹配逻辑仍会任务目标已在对面存在而忽略穿梭）；增加rootPidValue字段，不再强制将根节点的pid都改为0

2.3.2 优化通讯录模式

2.3.1 将外层对el-tree的css设定移入内层，消除2.3.0取消css scoped产生的影响

2.3.0 取消css scoped

2.2.9 版本lazy属性只对左侧树生效，如果需要右侧也是用懒加载->lazyRight

2.2.8 优化defaultCheckedKeys和defaultTransfer配合使用时，触发了添加事件的问题，通常默认第一次穿梭是后台偷懒没有生成fromData和toData 两份数据，需要前端拆分，此时再触发添加事件则务必要；另可不使用defaultTransfer而是在defaultCheckedKeys改变后手动调用addToAims(false)函数，参数传false则不会触发emit回调

2.2.6 增加clearChecked清空选中节点方法

2.2.5 增加参数defaultExpandedKeys默认展开节点

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

旧版文档【不再更新】

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. 参数：mode 说明：设置模式，字段可选值为transfer|addressList 类型：String 必填：false 补充：mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人

15. 参数：transferOpenNode 说明：穿梭后是否展开穿梭的节点 类型：Boolean 必填：false 补充：默认为true即展开穿梭的节点，便于视觉查看，增加此参数是因为数据量大时展开会有明显卡顿问题，但注意，如此参数设置为false则穿梭后不展开，毕竟无法确定第几层就会有庞大数据

16. 参数：defaultCheckedKeys 说明：默认展开节点 类型：Array 必填：false 补充：只匹配初始时默认节点，不会在你操作后动态改变默认节点

17. 参数：placeholder 说明：设置搜索框提示语 类型：String 必填：false 补充：默认为请输入关键词进行筛选

18. 参数：defaultTransfer 说明：是否自动穿梭一次默认选中defaultCheckedKeys的节点 类型：Boolean 必填：false 补充：默认false，用来满足用户不想将数据拆分成fromData和toData的需求

19. 参数：arrayToTree 说明：是否开启一维数组转化为树形结构 类型：Boolean 必填：false 补充：数据必须存在根节点，并且不会断节，数据格式详见github上app.vue，根据id、pid对应关系转化，存在一定的性能问题

20. 参数：addressOptions 说明：通讯录模式配置项{num: Number, suffix: String, connector: String} 类型：Object 必填：false 补充：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. 事件：addBtn 说明：点击添加按钮时触发的事件 回调参数：function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表

24. 事件：removeBtn 说明：点击移除按钮时触发的事件 回调参数：function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表

25. 事件：left-check-change 说明：左侧源数据勾选事件 回调参数：function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值,新增第三个参数表示是否全部选中

26. 事件：right-check-change 说明：右侧目标数据勾选事件 回调参数：function(nodeObj, treeObj, checkall)见el-tree组件check事件返回值，新增第三个参数表示是否全部选中

27. Slot：left-footer, right-footer 说明：穿梭框左侧、右侧底部slot

28. Slot: title-left, title-right 说明：穿梭框标题区左侧、右侧自定义内容

GitHub demo 代码地址 欢迎 star 谢谢

有好多有脾气的老哥找我给打赏，谢过

tree-transfer's Issues

按照用例那样使用, 页面空白

从详情到编辑的反显

场景：当新建内容后，回来编辑一般接口只会告诉我选的id，意味着我要把原来的树做拆分成form_data和to_data，才能达到我之前选中的情况，那这样对于原树的构建和层级很深情况下，工作量是不是会很大了,虽然通过defaultCheckedKeys可以让左侧勾选，但业务场景应该这些执行一次addToAims

没用，安装了，用不了

能否加一个全选事件回调

没有全选功能么？

左边的tree点击右边不会添加

右边的toData一定要有初始数据吗？是个空数组行不行

数据添加混乱

不能动态的设置初始defaultCheckedKeys，再次点击会叠加

// 不能动态的设置初始defaultCheckedKeys
// 点击了默认选1-2 后，关闭弹框
// 再次点击默认选1-1后，发现上一次点击的默认点击数据还存在并进行了叠加
// demo如下，大神看下

默认选1-1 默认选1-2

<script> import treeTransfer from 'el-tree-transfer' export default { components: {treeTransfer}, name: 'test', data () { return { isDeptDialog: false, 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'} ] }, {id: '1-3', pid: '1', label: '二级 1-3', children: []}, {id: '1-4', pid: '1', label: '二级 1-4', children: [ {id: '1-4-1', pid: '1-4', children: [], label: '二级 1-4-1'}, {id: '1-4-2', pid: '1-4', children: [], label: '二级 1-4-2'} ] } ] } ], toData: [], defaultCheckedKeys: [] } }, methods: { handleSure (val) { let arr = [] arr.push(val) this.isDeptDialog = true this.defaultCheckedKeys = arr } } } </script>

文档DEMO单词错误

components写成了comporents 找了半天才发现错误

数据格式为array格式时，全选后穿梭数据丢失

先谢谢这个组件，省了我不少时间。
两个问题

1. 数据格式为array时，全选后穿梭数据丢失，树格式数据没有问题
2. 数据格式为tree时，如果一级菜单是并列的几个，且其中有disable的节点，如下代码。选中有disable的节点和另一个一级节点到右侧，然后右侧将disable节点的node选到左边，则另一个一级节点也回到左边了
   暂时没有时间定位，先抛出问题吧

fromData: [
        {
          id: 1,
          pid: 0,
          name: '关键字',
          children: [
            {
              id: 11,
              pid: 1,
              name: '财务报表',
              disabled: true
            },
            {
              id: 12,
              pid: 1,
              name: '工资奖金'
            },
            {
              id: 13,
              pid: 1,
              name: '会议纪要'
            }
          ]
        }, {
          id: 2,
          pid: 0,
          name: '正则',
          children: [
            {
              id: 22,
              pid: 2,
              name: 'Email地址',
              disabled: true
            },
            {
              id: 23,
              pid: 2,
              name: 'MAC地址'
            },
            {
              id: 24,
              pid: 2,
              name: 'IPv6地址'
            }
          ]
        }, {
          id: 3,
          pid: 0,
          name: '标识符',
          children: [
            {
              id: 32,
              pid: 3,
              name: '包含确切数据过滤器模板'
            },
            {
              id: 33,
              pid: 3,
              name: '包含前缀过滤器模板'
            },
            {
              id: 34,
              pid: 3,
              name: '包含后缀过滤器模板'
            }
          ]
        }
      ],

子节点id是必须是唯一的吗?

当子节点的id不唯一的时候 存在移动数据错乱的情况 不知道是不是这个引起的 谢谢答疑

穿梭到左边，然后在穿梭回到右边，数据是在底部的，不是数据原始位置

穿梭到左边，然后在穿梭回到右边，数据是在底部的，不是数据原始位置，能增加一个参数，记住数据原始位置，穿梭回来后还是在原始位置；因为当数据多起来，不在原来的位置，用户体验非常差

是不是应该吧代码更新一下

代码跟demo,readme都对应不上，使用的话，有好几个问题：

1. 如果一级数据不存在children的话，左右穿梭会报错；
2. 从左向右穿梭，会出现左边的数据不减少，右边的数据按正常增加，但是从右向左不会出现这种情况（经我个人实验，二级数据的前三条会，后面不会）
3. 明明id没有重叠，但是在从左向右添加时，数据会被添加到其他组。

以上是我个人使用出现的问题，但是由于文档写的不易阅读理解，所以斗胆提出。如有冒犯，请见谅。

为什么左边是树形右边就变成了列表

为什么左边是树形右边就变成了列表

代码如下：
<tree-transfer :from_data="workType" :to_data="dest" :default-props="{ children: 'children',label:'typeName' }" :mode="mode" @addBtn="add" @removeBtn="remove">

id为int型

当id为1是删除会出现问题。

勾选左侧children组件的选项，按钮不会触发

勾选左侧children组件的选项，按钮不会触发，
勾选左侧全部，按钮点击 "TypeError: this.$refs.from-tree.getHalfCheckedKeys is not a function"

能否实现选择树时，父子节点无关系，可否单独添加父节点或子节点

采用defaultCheckedKeys和 defaultTransfer参数，左边表格样式问题

默认数据赋值给defaultCheckedKeys，然后让defaultTransfer自动穿梭到右边
但左边不应该显示蓝色样式吧？

可以扩展一下树节点的icon

最新版本 id为number类型还是有问题，请大佬看一看

你可以用下面的数据格式试一下，或者说是我的这个数据格式不正确吗？

[
{
"id": 115224,
"parentId": 0,
"level": 0,
"areaCode": 210000000000,
"zipCode": 0,
"cityCode": "",
"name": "辽宁省",
"shortName": "辽宁",
"mergerName": "辽宁",
"pinyin": "LiaoNing",
"lon": 123.42944,
"lat": 41.83544,
"subAreas": [
{
"id": 115225,
"parentId": 115224,
"level": 1,
"areaCode": 210100000000,
"zipCode": 110000,
"cityCode": "024",
"name": "沈阳市",
"shortName": "沈阳",
"mergerName": "辽宁,沈阳",
"pinyin": "ShenYang",
"lon": 123.43147,
"lat": 41.8057,
"subAreas": [
{
"id": 115227,
"parentId": 115225,
"level": 2,
"areaCode": 210102000000,
"zipCode": 110000,
"cityCode": "024",
"name": "和平区",
"shortName": "和平",
"mergerName": "辽宁,沈阳,和平",
"pinyin": "HePing",
"lon": 123.42038,
"lat": 41.78981,
"subAreas": null
},
{
"id": 115226,
"parentId": 115225,
"level": 2,
"areaCode": 210101000000,
"zipCode": 110000,
"cityCode": "024",
"name": "市辖区",
"shortName": "沈阳",
"mergerName": "辽宁,沈阳",
"pinyin": "ShenYang",
"lon": 123.43147,
"lat": 41.8057,
"subAreas": null
},
{
"id": 115347,
"parentId": 115225,
"level": 2,
"areaCode": 210103000000,
"zipCode": 110000,
"cityCode": "024",
"name": "沈河区",
"shortName": "沈河",
"mergerName": "辽宁,沈阳,沈河",
"pinyin": "ShenHe",
"lon": 123.4589,
"lat": 41.795654,
"subAreas": null
},
{
"id": 115474,
"parentId": 115225,
"level": 2,
"areaCode": 210104000000,
"zipCode": 110000,
"cityCode": "024",
"name": "大东区",
"shortName": "大东",
"mergerName": "辽宁,沈阳,大东",
"pinyin": "DaDong",
"lon": 123.46995,
"lat": 41.805138,
"subAreas": null
},
{
"id": 115612,
"parentId": 115225,
"level": 2,
"areaCode": 210105000000,
"zipCode": 110000,
"cityCode": "024",
"name": "皇姑区",
"shortName": "皇姑",
"mergerName": "辽宁,沈阳,皇姑",
"pinyin": "HuangGu",
"lon": 123.44197,
"lat": 41.824795,
"subAreas": null
},
{
"id": 115752,
"parentId": 115225,
"level": 2,
"areaCode": 210106000000,
"zipCode": 110020,
"cityCode": "024",
"name": "铁西区",
"shortName": "铁西",
"mergerName": "辽宁,沈阳,铁西",
"pinyin": "TieXi",
"lon": 123.376305,
"lat": 41.802914,
"subAreas": null
},
{
"id": 115964,
"parentId": 115225,
"level": 2,
"areaCode": 210111000000,
"zipCode": 110100,
"cityCode": "024",
"name": "苏家屯区",
"shortName": "苏家屯",
"mergerName": "辽宁,沈阳,苏家屯",
"pinyin": "SuJiaTun",
"lon": 123.34403,
"lat": 41.664757,
"subAreas": null
},
{
"id": 116159,
"parentId": 115225,
"level": 2,
"areaCode": 210112000000,
"zipCode": 110117,
"cityCode": "024",
"name": "浑南区",
"shortName": "浑南",
"mergerName": "辽宁,沈阳,浑南",
"pinyin": "HunNan",
"lon": 123.449715,
"lat": 41.714912,
"subAreas": null
},
{
"id": 116399,
"parentId": 115225,
"level": 2,
"areaCode": 210113000000,
"zipCode": 110000,
"cityCode": "024",
"name": "沈北新区",
"shortName": "沈北",
"mergerName": "辽宁,沈阳,沈北",
"pinyin": "ShenBei",
"lon": 123.43147,
"lat": 41.8057,
"subAreas": null
},
{
"id": 116614,
"parentId": 115225,
"level": 2,
"areaCode": 210114000000,
"zipCode": 110000,
"cityCode": "024",
"name": "于洪区",
"shortName": "于洪",
"mergerName": "辽宁,沈阳,于洪",
"pinyin": "YuHong",
"lon": 123.308136,
"lat": 41.793743,
"subAreas": null
},
{
"id": 116820,
"parentId": 115225,
"level": 2,
"areaCode": 210115000000,
"zipCode": 110299,
"cityCode": "024",
"name": "辽中区",
"shortName": "辽中",
"mergerName": "辽宁,沈阳,辽中",
"pinyin": "LiaoZhong",
"lon": 122.76541,
"lat": 41.516827,
"subAreas": null
},
{
"id": 117075,
"parentId": 115225,
"level": 2,
"areaCode": 210123000000,
"zipCode": 110500,
"cityCode": "024",
"name": "康平县",
"shortName": "康平",
"mergerName": "辽宁,沈阳,康平",
"pinyin": "KangPing",
"lon": 123.3557,
"lat": 42.741005,
"subAreas": null
},
{
"id": 117268,
"parentId": 115225,
"level": 2,
"areaCode": 210124000000,
"zipCode": 110400,
"cityCode": "024",
"name": "法库县",
"shortName": "法库",
"mergerName": "辽宁,沈阳,法库",
"pinyin": "FaKu",
"lon": 123.4405,
"lat": 42.50073,
"subAreas": null
},
{
"id": 117530,
"parentId": 115225,
"level": 2,
"areaCode": 210181000000,
"zipCode": 110300,
"cityCode": "024",
"name": "新民市",
"shortName": "新民",
"mergerName": "辽宁,沈阳,新民",
"pinyin": "XinMin",
"lon": 122.83672,
"lat": 41.98519,
"subAreas": null
}
]
}
]
},
{
"id": 1,
"parentId": 0,
"level": 0,
"areaCode": 110000000000,
"zipCode": 0,
"cityCode": "",
"name": "北京市",
"shortName": "北京",
"mergerName": "北京",
"pinyin": "BeiJing",
"lon": 116.407524,
"lat": 39.90403,
"subAreas": [
{
"id": 2,
"parentId": 1,
"level": 1,
"areaCode": 110100000000,
"zipCode": 100000,
"cityCode": "010",
"name": "直辖区",
"shortName": "北京",
"mergerName": "北京",
"pinyin": "BeiJing",
"lon": 116.407524,
"lat": 39.90403,
"subAreas": [
{
"id": 3,
"parentId": 2,
"level": 2,
"areaCode": 110101000000,
"zipCode": 100000,
"cityCode": "010",
"name": "东城区",
"shortName": "东城",
"mergerName": "北京,东城",
"pinyin": "DongCheng",
"lon": 116.41636,
"lat": 39.928352,
"subAreas": null
},
{
"id": 203,
"parentId": 2,
"level": 2,
"areaCode": 110102000000,
"zipCode": 100000,
"cityCode": "010",
"name": "西城区",
"shortName": "西城",
"mergerName": "北京,西城",
"pinyin": "XiCheng",
"lon": 116.36587,
"lat": 39.91229,
"subAreas": null
},
{
"id": 480,
"parentId": 2,
"level": 2,
"areaCode": 110105000000,
"zipCode": 100000,
"cityCode": "010",
"name": "朝阳区",
"shortName": "朝阳",
"mergerName": "北京,朝阳",
"pinyin": "ZhaoYang",
"lon": 116.44311,
"lat": 39.92147,
"subAreas": null
},
{
"id": 1122,
"parentId": 2,
"level": 2,
"areaCode": 110106000000,
"zipCode": 100000,
"cityCode": "010",
"name": "丰台区",
"shortName": "丰台",
"mergerName": "北京,丰台",
"pinyin": "FengTai",
"lon": 116.28715,
"lat": 39.858425,
"subAreas": null
},
{
"id": 1533,
"parentId": 2,
"level": 2,
"areaCode": 110107000000,
"zipCode": 100000,
"cityCode": "010",
"name": "石景山区",
"shortName": "石景山",
"mergerName": "北京,石景山",
"pinyin": "ShiJingShan",
"lon": 116.222984,
"lat": 39.906612,
"subAreas": null
},
{
"id": 1692,
"parentId": 2,
"level": 2,
"areaCode": 110108000000,
"zipCode": 100000,
"cityCode": "010",
"name": "海淀区",
"shortName": "海淀",
"mergerName": "北京,海淀",
"pinyin": "HaiDian",
"lon": 116.29806,
"lat": 39.95991,
"subAreas": null
},
{
"id": 2376,
"parentId": 2,
"level": 2,
"areaCode": 110109000000,
"zipCode": 102300,
"cityCode": "010",
"name": "门头沟区",
"shortName": "门头沟",
"mergerName": "北京,门头沟",
"pinyin": "MenTouGou",
"lon": 116.10201,
"lat": 39.940647,
"subAreas": null
},
{
"id": 2689,
"parentId": 2,
"level": 2,
"areaCode": 110111000000,
"zipCode": 102400,
"cityCode": "010",
"name": "房山区",
"shortName": "房山",
"mergerName": "北京,房山",
"pinyin": "FangShan",
"lon": 116.143265,
"lat": 39.749146,
"subAreas": null
},
{
"id": 3324,
"parentId": 2,
"level": 2,
"areaCode": 110112000000,
"zipCode": 101100,
"cityCode": "010",
"name": "通州区",
"shortName": "通州",
"mergerName": "北京,通州",
"pinyin": "TongZhou",
"lon": 116.65643,
"lat": 39.909946,
"subAreas": null
},
{
"id": 3927,
"parentId": 2,
"level": 2,
"areaCode": 110113000000,
"zipCode": 101300,
"cityCode": "010",
"name": "顺义区",
"shortName": "顺义",
"mergerName": "北京,顺义",
"pinyin": "ShunYi",
"lon": 116.65465,
"lat": 40.13035,
"subAreas": null
},
{
"id": 4498,
"parentId": 2,
"level": 2,
"areaCode": 110114000000,
"zipCode": 102200,
"cityCode": "010",
"name": "昌平区",
"shortName": "昌平",
"mergerName": "北京,昌平",
"pinyin": "ChangPing",
"lon": 116.2312,
"lat": 40.22066,
"subAreas": null
},
{
"id": 5042,
"parentId": 2,
"level": 2,
"areaCode": 110115000000,
"zipCode": 102600,
"cityCode": "010",
"name": "大兴区",
"shortName": "大兴",
"mergerName": "北京,大兴",
"pinyin": "DaXing",
"lon": 116.34139,
"lat": 39.72693,
"subAreas": null
},
{
"id": 5800,
"parentId": 2,
"level": 2,
"areaCode": 110116000000,
"zipCode": 101400,
"cityCode": "010",
"name": "怀柔区",
"shortName": "怀柔",
"mergerName": "北京,怀柔",
"pinyin": "HuaiRou",
"lon": 116.64235,
"lat": 40.315704,
"subAreas": null
},
{
"id": 6138,
"parentId": 2,
"level": 2,
"areaCode": 110117000000,
"zipCode": 101200,
"cityCode": "010",
"name": "平谷区",
"shortName": "平谷",
"mergerName": "北京,平谷",
"pinyin": "PingGu",
"lon": 117.12138,
"lat": 40.1407,
"subAreas": null
},
{
"id": 6466,
"parentId": 2,
"level": 2,
"areaCode": 110118000000,
"zipCode": 101599,
"cityCode": "010",
"name": "密云区",
"shortName": "密云",
"mergerName": "北京,密云",
"pinyin": "MiYun",
"lon": 116.84318,
"lat": 40.376835,
"subAreas": null
},
{
"id": 6921,
"parentId": 2,
"level": 2,
"areaCode": 110119000000,
"zipCode": 100062,
"cityCode": "010",
"name": "延庆区",
"shortName": "延庆",
"mergerName": "北京,延庆",
"pinyin": "YanQing",
"lon": 115.974846,
"lat": 40.45695,
"subAreas": null
}
]
}
]
}
]

左侧的树 fromData 如何懒加载 lazy load ？

如题，左侧的树 fromData 如何懒加载 lazy load ？

如何动态添加子节点数据

异步请求的数据动态加到父节点children没有更新视图。

这个功能是否可以单独拿出来使用？

就是说，我不用安装element，而是单独下载该组件使用

fromData和toData 没有随着tree结构动态更新

fromData和toData 只是用来设置默认值得吗，给右边添加值，界面变化了，但是toData 和 fromData还是原来的值

默认选中

这是不是没有默认选中的功能。

toData有默认数据要怎么做？fromData的数据内还是有与toData重复的数据

我需要给toData框放一些默认值，但是放进去之后，fromData里重复的数据并没有消失，我应该怎么做才可以给toData赋默认值，是否只能点击往右的按钮传过去？

不点击选择框，点击文字会出现死循环报错

RangeError:Maximum call stack size exceeded

勾选事件

如何监听CheckBox的勾选事件，用的是@left-check-change（左侧），那现在换成如何监听呢？

如果初始defaultCheckedKeys中有一个一级父类一个子类，右侧会选中所有当前父类下的所有子类

右侧选中的数据怎么获得 没明白怎么用？

求各位大佬解释下哇，没明白怎么获得选中的右侧数据

更新之后点击所选父节点，子节点出不来了

筛选后选择父节点，未显示的子节点也会被选中？

例如demo中的数据，搜索框输入数字5，选择11-4，11-4下面左右子节点全部被移到右侧？如果只想转移显示的（筛选）数据，如何操作？谢谢

对核心代码，左右2边移动数据有点晕

节点的挂载算法有点晕。。。有没有什么好建议

filter 自定义搜索不支持大小写模糊搜索

建议参照el-transfer加入底部footer-slot

如何获取右侧勾选数据啊？

如题，获取数据里被勾选的项

修改fromData的值，左边的树结构不会改变么

点击穿梭按钮完成操作后，原有的半选不会消失，这算不算一个缺陷

能否做到对过滤搜索框placeholder语言的更改？

建议穿梭后显示的树不要默认展开,数据多的话会很慢!

建议穿梭后显示的树不要默认展开,数据多的话会很慢!

树状结构超过3层是不是就无法左右移动

使用该组件，发现只能支持3层树状结构，左右穿梭

您好！就是穿梭框的兄弟树形表格 有点问题想问下作者是你吗？

数据选择上有问题

使用版本:

结果:

self_from_data:
[{"id":1,"label":"查找所有商品","pid":0},{"id":3,"label":"eos管理员门店管理","pid":0,"children":[{"id":51,"label":"门店等级列表","pid":3},{"id":4,"label":"eos管理员门店列表","pid":3}]},{"id":5,"label":"eos管理员供应商管理","pid":0,"children":[{"id":52,"label":"商品价格级别列表","pid":5},{"id":6,"label":"eos管理员供应商列表","pid":5}]},{"id":7,"label":"eos管理员采购管理","pid":0,"children":[{"id":8,"label":"eos管理员采购列表","pid":7}]},{"id":9,"label":"eos管理员代发管理","pid":0,"children":[{"id":10,"label":"eos管理员代发列表","pid":9}]},{"id":11,"label":"eos管理员系统管理","pid":0,"children":[{"id":16,"label":"eos管理员系统日志","pid":11},{"id":15,"label":"eos管理员送货地址","pid":11},{"id":14,"label":"eos管理员系统通知","pid":11},{"id":13,"label":"eos管理员系统参数","pid":11},{"id":12,"label":"eos管理员解析模板","pid":11}]},{"id":18,"label":"eos门店供应商管理","pid":0,"children":[{"id":20,"label":"eos门店财务管理","pid":18},{"id":19,"label":"eos门店供应商综合","pid":18}]},{"id":21,"label":"eos门店商品管理","pid":0},{"id":22,"label":"eos门店订单管理","pid":0,"children":[{"id":26,"label":"eos门店代发订单","pid":22},{"id":25,"label":"eos门店入库单","pid":22},{"id":24,"label":"eos门店采购单","pid":22},{"id":23,"label":"eos门店采购计划单","pid":22}]},{"id":27,"label":"eos门店个人中心","pid":0,"children":[{"id":29,"label":"eos门店消息通知","pid":27},{"id":28,"label":"eos门店账户安全","pid":27}]},{"id":31,"label":"eos仓库门店管理","pid":0,"children":[{"id":33,"label":"eos仓库财务管理","pid":31},{"id":32,"label":"eos仓库门店管理类表","pid":31}]},{"id":34,"label":"eos仓库商品管理","pid":0},{"id":35,"label":"eos仓库订单管理","pid":0,"children":[{"id":38,"label":"eos仓库代发管理","pid":35},{"id":37,"label":"eos仓库出库单","pid":35},{"id":36,"label":"eos仓库采购单","pid":35}]},{"id":39,"label":"eos仓库个人中心","pid":0,"children":[{"id":43,"label":"eos仓库支付管理","pid":39},{"id":42,"label":"eos仓库消息通知","pid":39},{"id":41,"label":"eos仓库账号安全","pid":39},{"id":40,"label":"eos仓库个人信息","pid":39}]},{"id":47,"label":"测试业务功能名称","pid":0},{"id":50,"label":"string","pid":0},{"id":53,"label":"拆单接口","pid":0}]
self_to_data:
[{"id":1,"label":"查找所有商品","pid":0},{"id":31,"label":"eos仓库门店管理","pid":0,"children":[{"id":33,"label":"eos仓库财务管理","pid":31},{"id":32,"label":"eos仓库门店管理类表","pid":31}]},{"id":34,"label":"eos仓库商品管理","pid":0},{"id":35,"label":"eos仓库订单管理","pid":0,"children":[{"id":38,"label":"eos仓库代发管理","pid":35}]},{"id":39,"label":"eos仓库个人中心","pid":0,"children":[{"id":43,"label":"eos仓库支付管理","pid":39},{"id":42,"label":"eos仓库消息通知","pid":39},{"id":41,"label":"eos仓库账号安全","pid":39},{"id":40,"label":"eos仓库个人信息","pid":39}]}]

老兄，能提供源代码吗

老兄，您提供的这个只能对部分刚好符合业务的有帮助，能提供源代码吗，我要改成三个穿梭框，同时也向你学习啦

节点lable名字过超出穿梭框

有没有办法默认不可选

有没有办法默认不可选

filter 搜索文字如何清空

filter 输入的搜索文字如何清空

leafOnly参数会影响穿梭的数据

在配置参数leafOnly时，选择数据左右穿梭，数据会显示错乱

穿梭框参数format

elementUI中的穿梭框参数format（列表顶部的勾选状态文案）无法使用？
另外想请教一下，如果输入框输入关键字，展示下拉列表，选中列表数据后提交后台，最后再根据后台返回的结果展示主区域树结构，如何实现

使用自定义字段穿梭后，右边的没有成为树状结构，直接列表了

如图，层级有点多，不知道是怎么回事