基於 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