在vue项目中使用树形结构的穿梭框

青旅半醒 2022-11-18 04:57 236阅读 0赞

# 先看一下最后的效果： #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70]

> 一个基于elementui的穿梭框组件：el-tree-transfer

第一步：安装组件

> npm install el-tree-transfer --save

第二步：写代码

// 使用树形穿梭框组件
    
        <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>

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);
    
          }
    
        },
    
        components:{  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. 参数：**mode** 说明：设置模式，字段可选值为transfer|addressList 类型：String 必填：false  
    补充：mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人
15. 参数：**transferOpenNode** 说明：穿梭后是否展开穿梭的节点 类型：Boolean 必填：false  
    补充：默认为true即展开穿梭的节点，便于视觉查看，增加此参数是因为数据量大时展开会有明显卡顿问题，但注意，如此参数设置为false则穿梭后不展开，毕竟无法确定第几层就会有庞大数据
16. 参数：**defaultCheckedKeys** 说明：默认展开节点 类型：Array 必填：false  
    补充：只匹配初始时默认节点，不会在你操作后动态改变默认节点
17. 参数：**placeholder** 说明：设置搜索框提示语 类型：String 必填：false 补充：默认为请输入关键词进行筛选  
    参数：**defaultTransfer** 说明：是否自动穿梭一次默认选中defaultCheckedKeys的节点 类型：Boolean  
    必填：false 补充：默认false，用来满足用户不想将数据拆分成fromData和toData的需求
18. 事件：**addBtn** 说明：点击添加按钮时触发的事件  
    回调参数：function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
19. 事件：**removeBtn** 说明：点击移除按钮时触发的事件  
    回调参数：function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70]: /images/20221022/0d463fe549a04182a0b35179ddbc1927.png