这篇文章主要为大家详细介绍了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]){
结果；
}
}
}
this.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()；
},
}
最终显示结果：
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。