VUE Elemen-ui 之穿梭框使用

灰太狼 2021-09-18 17:22 340阅读 0赞

背景：

现在需要使用穿梭框实现，角色的操作功能

需要使用 ***Element Transfer* *穿梭框***

HTML代码：

Style代码：

Script代码：

export default {
            data(){
                 return{
                    rolePool : [],              //角色池
                    initSelectedValue : [],     //初始化选中的值
                    handleSelectedValue : [],   //操作后选中的值
                    finalAddResult: [],         //最终添加结果 
                    finalRemoveResult: [],      //最终删除结果 
                 }
            },
            methods: {
    
                //保存到后端
                save(){
                    //逻辑代码
                },
    
                //重置
                reset(){
                    this.rolePool = [];              //清空角色池
                    this.handleSelectedValue = [];   //清空已有角色
                    this.getRoleData();
                },
                //整合封装结果 
                integrationEncapsulationResult(){
                    let retain = [];     //保留的角色
                    for(let i=0; i<this.handleSelectedValue.length; i++){
                        for(let f=0; f<this.initSelectedValue.length; f++){
                            if(this.handleSelectedValue[i] == this.initSelectedValue[f]){
                                retain.push(this.handleSelectedValue[i]);
                            }
                        }
                    }
    
                /************ 有保留角色操作 ************/
                    if(retain.length > 0){
                        let result = 0; //保留项是否 与 初始化选中的数据相同的 个数
                        for(let i=0; i<this.initSelectedValue.length; i++){  
                            for(let f=0; f<retain.length; f++){     
                                if(this.initSelectedValue[i]== retain[f]){
                                    ++result;
                                }
                            }
                        }
    
                        this.addRole(retain);           //增加角色  
                        this.deletRole(retain,result);  //删除角色
                        
                    }else{
                        for(let i=0; i<this.handleSelectedValue.length; i++){
                            this.encapsulationResult(i,this.handleSelectedValue,this.finalAddResult);
                        }
                        for(let i=0; i<this.initSelectedValue.length; i++){
                            this.encapsulationResult(i,this.initSelectedValue,this.finalRemoveResult);
                        }
                    }
                },
    
                /**
                 * 封装结果
                 * index  循环下标
                 * arr    数组
                 * returnResult 返回结果
                 */
                encapsulationResult(index,arr,returnResult){
                     for(let j=0; j<this.rolePool.length; j++){
                        if(arr[index] == this.rolePool[j].key){
                            let a ={roleId:this.rolePool[j].key,roleName:this.rolePool[j].label}
                            returnResult.push(a);
                        }
                    }
                },
    
                //增加角色
                addRole(retain){
                    //逻辑代码
                },
    
                //删除角色
                deletRole(retain,result){
                    //true有删除项 false 无删除项        对比保留项是否 与 初始化选中的数据不一致
                    if(result!=this.initSelectedValue.length){   
                         //逻辑代码
                    }
                },
    
                //获取角色
                getRoleData(){
                    let url = `${lz}/wfHandleRole/showWfHandleRole`;
                    let data = {};
                    this.$post(url,data).then(retData => {
                        console.log('获取角色  ',retData);
                        if(retData.returnCode == 1){
                            let arr = retData.returnData;
                            //逻辑代码
                        }
                    });
                },
    
                
    
            },
            created(){
                this.getRoleData();
                
            },
    
        }

#  最终显示结果： #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzE1NDk0_size_16_color_FFFFFF_t_70]: /images/20210725/fe90e9f873c348b8be609576630c8aaa.png