本文實(shí)例為大家分享了VUE Elemen-ui之穿梭框使用方法，供大家參考，具體內(nèi)容如下

背景：

現(xiàn)在需要使用穿梭框?qū)崿F(xiàn)，角色的操作功能

需要使用 Element Transfer 穿梭框

HTML代碼：

<template> <el-card shadow='never' style='height: 700px;'> <div slot='header' style='height:25px'> <div style='float:left'> <span class='titel_font'>角色操作</span> </div> <div style='float:right'> <el-button type='primary' size='mini' @click='back()'>返回首頁</el-button> </div> </div> <div > <el-transfer v-model='handleSelectedValue' :data='rolePool' :titles='[’待選角色’, ’已有角色’]' :button-texts='[’移除’, ’添加’]' ></el-transfer> <el-button type='success' @click='save()'>保存</el-button> <el-button type='warning' @click='reset()'>重置</el-button> </div> </el-card></template>

Style代碼：

<style> /* 設(shè)置穿梭框的 寬高 */ .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: [], //最終添加結(jié)果 finalRemoveResult: [], //最終刪除結(jié)果 } }, methods: { //保存到后端 save(){ //邏輯代碼 }, //重置 reset(){ this.rolePool = []; //清空角色池 this.handleSelectedValue = []; //清空已有角色 this.getRoleData(); }, //整合封裝結(jié)果 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; //保留項(xiàng)是否 與 初始化選中的數(shù)據(jù)相同的 個(gè)數(shù) 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); } } }, /** * 封裝結(jié)果 * index 循環(huán)下標(biāo) * arr 數(shù)組 * returnResult 返回結(jié)果 */ 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有刪除項(xiàng) false 無刪除項(xiàng) 對(duì)比保留項(xiàng)是否 與 初始化選中的數(shù)據(jù)不一致 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(); }, }

最終顯示結(jié)果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。