elementui穿梭框回显 elementui树形穿梭框

先看一下最后的效果：

一个基于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模式时返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表