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 相关文章推荐
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
JSON相关知识汇总
Jul 03 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
原生js实现回复评论功能
Jan 18 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
小程序如何构建骨架屏
May 29 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
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
JS 显示当前日期与时间的代码
2010/03/24 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
python计算圆周率pi的方法
2015/07/11 Python
详解django中自定义标签和过滤器
2017/07/03 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
python实现简易内存监控
2018/06/21 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
python MD5加密的示例
2020/10/19 Python
python 实现Harris角点检测算法
2020/12/11 Python
中国医药集团国药在线:国药网
2017/02/06 全球购物
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
Why we need EJB
2016/10/20 面试题
担保书怎么写
2014/04/01 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
《庐山的云雾》教学反思
2014/04/22 职场文书
幼儿发展评估方案
2014/06/11 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
公司周年庆寄语
2019/06/21 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫