这篇文章主要为大家详细介绍了VUE Elemen-ui之穿梭框使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了VUE Elemen-ui之穿梭框使用方法，供大家参考，具体内容如下
背景：
现在需要使用穿梭框实现，角色的操作功能
需要使用元素转移穿梭框
HTML代码：
模板
El-card class= box-card shadow= never style= height:700 px；
div slot= header class= clear fix 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%；上边距：20px
埃尔传输
v-model=handleSelectedValue
:数据=角色池
:titles=[待选角色, 已有角色]
:button-texts=[移除, 添加]
/el-transfer
El-button type= success style= margin-left:20%；上边距：40px@click=save()保存/el-button
El-button type= warning style= margin-left:200 px；上边距：40px@click=reset()重置/el-button
/div
/电子名片
/模板
Style代码：
风格
/* 设置穿梭框的宽高*/。埃尔-传输面板{
宽度：350像素
高度：400像素
}。el-transfer-panel__list {
边距：0;
填充：6px 0；
列表样式：无；
高度：390像素
溢出：自动；
-WebKit-box-sizing:border-box；
框大小：边框-框；
}。El-transfer _ _按钮{
显示：内嵌-块；
垂直对齐：居中；
填充：0 30px
}
/风格
Script代码：
导出默认值{
data(){
返回{
角色池：[],//角色池
initSelectedValue : []，//初始化选中的值
handleSelectedValue : []，//操作后选中的值
finalAddResult: []，//最终添加结果
finalroveresult:[]，//最终删除结果
}
},
方法：{
//保存到后端
save(){
//逻辑代码
},
//重置
重置(){
这个。角色池=[]；//清空角色池
这个。handleselectedvalue=[]；//清空已有角色
这个。getroledata()；
},
//整合封装结果
integrationEncapsulationResult(){
let retain=[]；//保留的角色
对于(设I=0；这是。handleselectedvalue。长度；i ){
对于(设f=0；这是。initselectedvalue。长度；f ){
如果(这个。handleselectedvalue[I]==this。initselectedvalue[f]){
保留。推(这个。handleselectedvalue[I])；
}
}
}
/************ 有保留角色操作************/
if(retain.length 0){
设结果=0;//保留项是否与初始化选中的数据相同的个数
对于(设I=0；这是。initselectedvalue。长度；i ){
对于(设f=0；烦躁不安。长度；f ){
如果(这个。initselectedvalue[I]==retain[f]){
结果；
}
}
}
这个。addrole(保留)；//增加角色
this.deletRole(保留，结果);//删除角色
}否则{
对于(设I=0；这是。handleselectedvalue。长度；i ){
this.encapsulationResult(i，this.handleSelectedValue，this。最终add result)；
}
对于(设I=0；这是。initselectedvalue。长度；i ){
this.encapsulationResult(i，this.initSelectedValue，this。finalroveresult)；
}
}
},
/**
* 封装结果
*索引循环下标
* arr数组
*返回结果返回结果
*/
encapsulationResult(index，arr，returnResult){
对于(设j=0；JT这个。角色池。长度；j ){
if(arr[index]==this。角色池[j]。关键){
设a={roleId:this.rolePool[j].key，roleName:this.rolePool[j].标签}
返回结果。推(一)；
}
}
},
//增加角色
addRole(保留){
//逻辑代码
},
//删除角色
删除（保留，结果){
//真有删除项错误的无删除项对比保留项是否与初始化选中的数据不一致
如果（结果！=这个。initselectedvalue。长度){
//逻辑代码
}
},
//获取角色
getRoleData(){
let URL=` $ { LZ }/wfHandleRole/showwfhandlerole `；
let data={ }；
这个. post(网址，数据)。然后(retData={
console.log(获取角色，retData)；
if(retData.returnCode==1){
让arr=retData.returnData
//逻辑代码
}
});
},
},
已创建(){
this . getroledata()；
},
}
最终显示结果：
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
