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>
/* */
.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();
},
}
최종 결과 표시:이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
VUE 기반 장치가 PC인지 모바일 포트인지 판단실제 개발 과정에서 자주 발생하는 수요는 현재 웹 페이지에 로그인한 장치가 PC인지 이동인지를 판단하고 PC 측과 모바일 측이 서로 다른 웹 내용을 표시하도록 요구하는 것이다. 그러면 현재 로그인 장치에 대한 판단이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.