基于 VUE 和 element-ui 的树形穿梭框组件 el-tree-transfer

　　　　　　　　　　　　<tree-transfer 
                        :title="['组织架构', '已选择']" 
                        :from_data='fromData' 
                        :to_data='toData' 
                        :defaultProps="{label:'label'}" 
                        @addBtn='add' 
                        @removeBtn='remove' 
                        @right-check-change="rightChange"
                        :mode='mode' 
                        height='540px' 
                        filter 
                        openAll>
                        <span slot="right-footer">请选择指挥长：{{userName}}</span>
                    </tree-transfer>

// 切换模式 现有树形穿梭框模式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);
        },
        //获取穿梭框左侧内容
        generateData:function(){
            let that = this;
            that.$axios.get('/api').then(rs=>{
               if(rs.data.code == 200){
                    var fromData = rs.data.data;
                    that.fromDataFunt(fromData)
                }
            })
        },
        fromDataFunt:function(datas){
          for (var i in datas) {
            datas[i].label=datas[i].name;
            datas[i].pid=datas[i].parentId;
            if (datas[i].children) {
              this.fromDataFunt(datas[i].children);
            }
            this.fromData = datas;
          }
        },

 

 

 

https://mrcdh.cn/pages/4af00d/#%E5%AE%89%E8%A3%85