VUE Elemen-ui之穿梭框使用方法详解


Posted in Javascript onJanuary 19, 2021

本文实例为大家分享了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();
 
 },
 
 }

最终显示结果:

VUE Elemen-ui之穿梭框使用方法详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript new fun的执行过程
Aug 05 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
Vue实现穿梭框效果
Sep 30 #Javascript
原生js实现表格翻页和跳转
Sep 29 #Javascript
vue实现井字棋游戏
Sep 29 #Javascript
js实现移动端图片滑块验证功能
Sep 29 #Javascript
js+cavans实现图片滑块验证
Sep 29 #Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 #Javascript
原生JavaScript实现刮刮乐
Sep 29 #Javascript
You might like
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
php实现头像上传预览功能
2017/04/27 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
实现51Map地图接口(示例代码)
2013/11/22 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
详解Python自建logging模块
2018/01/29 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
python列表的逆序遍历实现
2020/04/20 Python
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
新年团拜会主持词
2014/04/02 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
励志演讲稿200字
2014/08/21 职场文书
2015教师年度考核评语
2015/03/25 职场文书
前台接待员岗位职责
2015/04/15 职场文书
工程催款通知书
2015/04/17 职场文书
会议主持人开场白台词
2015/05/28 职场文书
厉行节约工作总结
2015/08/12 职场文书
小学班级标语口号大全
2015/12/26 职场文书
初二数学教学反思
2016/02/17 职场文书