VUE Elemen-ui 之穿梭框使用

 背景：

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

需要使用 Element Transfer 穿梭框 

HTML代碼：

<template>
    <el-card class="box-card" shadow="never" style="height: 700px;">   
    <div slot="header" class="clearfix" style="height:25px">
      <div style="float:left">
        <span class="titel_font">角色操作</span>
      </div>
      <div style="float:right">
        <el-button type="primary" size="mini" style="font-size:11px" @click="back()">傳回首頁</el-button>
      </div>
    </div>
    <div style="margin-left:20%;margin-top:20px;" >
        <el-transfer 
            v-model="handleSelectedValue"
            :data="rolePool"
            :titles="['待選角色', '已有角色']"
            :button-texts="['移除', '添加']"
        ></el-transfer>

        <el-button type="success" style="margin-left:20%;margin-top:40px;"  @click="save()">儲存</el-button>
        <el-button type="warning"    style="margin-left:200px;margin-top:40px;" @click="reset()">重置</el-button>
    </div>
  </el-card>
</template>
           

 Style代碼：

<style>
  /* 設定穿梭框的 寬高 */
  .el-transfer-panel{
        width : 350px;
        height: 400px;
    }
    .el-transfer-panel__list {
        margin: 0;
        padding: 6px 0;
        list-style: none;
        height: 390px;
        overflow: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .el-transfer__buttons {
        display: inline-block;
        vertical-align: middle;
        padding: 0 30px;
    }
</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();
            
        },

    }
           

 最終顯示結果：