一、安装 使用：

先 npm 下载插件

npm install el-tree-transfer --save

或

npm i el-tree-transfer -S

在需要使用组建的页面中引入：

<script>
  import treeTransfer from 'el-tree-transfer'    // 引入
 
  export defult {
    data(){
      return:{
        title: ["待选","已选"],    //标题 类型：Array 必填：false 默认：["源列表", "目标列表"]
        mode: "transfer", //设置模式，字段可选值为transfer|addressList 类型：String 必填：false 补充：mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人
        fromData:[    //源数据 类型：Array 必填：true 补充：数据格式同element-ui tree组件，但必须有id和pid
          {
            id: "1",
            pid: 0,    //自定义pid的参数名，默认为"pid" 必填：false
            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:[]    //目标数据 类型：Array 必填：true 补充：数据格式同element-ui tree组件，但必须有id和pid
      }
    },
    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>

像使用普通组件一样使用 el-tree-transfer

<template>
  <div>
    // 其他代码
    ...
    // 使用树形穿梭框组件
    <tree-transfer 
        :title="title"                 //标题 类型：Array 必填：false 默认：["源列表", "目标列表"]
        :from_data='fromData'         //源数据 类型：Array 必填：true 补充：数据格式同element-ui tree组件，但必须有id和pid
        :to_data='toData'             //目标数据 类型：Array 必填：true 补充：数据格式同element-ui tree组件，但必须有id和pid
        :defaultProps="{label:'label'}" //配置项-同el-tree中props 必填： false 补充：用法和el-tree的props一样
        @addBtn='add'                 //点击添加按钮时触发的事件 回调参数：function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
        @removeBtn='remove'            //点击移除按钮时触发的事件 回调参数：function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；通讯录addressList模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
        :mode='mode'                 //设置模式，字段可选值为transfer|addressList 类型：String 必填：false 补充：mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人
        height='400px'             //高度 类型：String 必填：false 默认：320px
        filter                     //是否开启筛选功能 类型：Boolean 必填：false
        openAll>                  //是否默认展开全部 类型：Boolean 必填：false
    </tree-transfer>
  </div>
</template>

说明：严格按照样例的数据结构来返回，不会出错。注意必须有pid，pid对应的是父id。but。。。重点来了，后台返回的不一定是按照例子来的，你让后端按照这个来，可是人家非不，那就只能咱前端自己来呗。

二、bug及排坑

defaultProps：修改参数对应名如{ label: "name", children: "child" }
pid涉及要改的内容比较多，在此处踩过坑数据从左边穿梭到右边后树形结构丢了，或者莫名添加一条数据，后来找了好久发现是后台返给我的fromData中没有pid,是parentId,所以在源码中解析不到pid，就不会给你转成树！而且放置的位置不对，依旧出错。

错误视图：

 

 莫名多了一条“哈哈哈哈”

调整vue：

<tree-transfer
                  :title="title"
                  :from_data="fromData"
                  :to_data="toData"
                  :pid="parent_id"
                  :defaultProps="{ label: 'name' }"
                  @addBtn="add"
                  @removeBtn="remove"
                  :mode="mode"
                  height="400px"
                  filter
                  openAll
                >
                </tree-transfer>

说明：添加：:pid="parent_id"

添加props：

export default {
 props: {
    // el-tree node-key 必须唯一
    node_key: {
      type: String,
      default: "id"
    },
    // 自定义 pid参数名，因为后端给的参数名为parentId
    pid: {
      type: String,
      default: "parent_id"
    },
  },
}

data定义：

parent_id: 'parent_id',
 /*穿梭框*/
title: ["会员组", "已选会员组"],
mode: "transfer",
data: [],

接口获取到的数据加工：

this.fromData = res.data.list
  this.fromData.forEach(item => {  //el-tree-transfer组件的第一个pid必须为0
     item.parent_id = 0
 })

没用上面方法处理，转到右侧后获取不到数据。

参考内容：

Vue el-tree与el-transfer的结合使用之el-tree-transfer_编程界的一名小学生-CSDN博客_el-tree-transfer 懒加载

el-tree-transfer 穿梭框的使用踩坑 - 程序yuan - 博客园