[JavaScript知识库]el-tree-transfer 树形穿梭框

el-tree-transfer是基于vue和element-ui的树形穿梭组件，使用前请确认是否引入element-ui。此组件类似element-ui的transfer组件，该组件分别是Checkbox多选框，Button按钮和Tree树形控件整合页成，在遇到需要树形穿梭功能时，推荐使用！

github文档：https://github.com/hql7/tree-transferhttps://github.com/hql7/tree-transfer

一、安装

npm install el-tree-transfer --save

//或者

npm i el-tree-transfer -S

二、基本使用

<template>
    <div>
        // 你的代码
        ...
        // 使用树形穿梭框组件
        <tree-transfer :title="title" 
            :from_data='fromData'                 //源数据，类型：Array，必填项
            :to_data='toData'                     //目标数据，类型：Array,必填项
            :defaultProps="{label:'label'}"       //配置项，匹配数据集中对应键值，非必填项
            @add-btn='add'                        //点击添加按钮时触发的事件
            @remove-btn='remove'                  //点击移除按钮时触发的事件
            :mode='mode'                          //设置模式，字段可选transfer或addressList，类型String
            height='540px'                        //高度，类型：String，非必填项 
            filter                                //是否开启筛选功能，类型：Boolean
            openAll                               //是否默认展开全部，类型：Boolean
        >
        </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>

三、文档

四、事件

五、方法

六、slot

七、获取选中项id

export default{
    data (){
        return {
            selected: []
        }
    },
    methods: {
        add(fromData,toData,obj){
            //追加选中数据ID
            this.selected.concat(obj.keys);
        },
        remove(fromData,toData,obj){
            //移除删除项数据
            this.selected = this.selected.filter(item => obj.keys.indexOf(item)==-1);
        }
    }
}