VUE Elemen-ui之穿梭框使用方法詳解
阿新 • • 發佈:2020-10-08
本文例項為大家分享了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(); },}
最終顯示結果:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。