vue实现穿梭框效果

一、总结

一句话总结：

用两个数组分别记录左右框框里面的值，用两个数组绑定checkbox，用来记录选中的checkbox值，根据选中的checkbox的值实现删除增加即可

1、这里checkbox是绑定的vue的数组数据，所以checkbox的点击的顺序不同的话索引的顺序是不同的，这样删除数据的时候可能会出错（比如删0再删2的时候，2已经变成了1，没2了删就会报错）？

对这个数组按照从大到小排序，从大到小删就不会出问题

2、vue实现穿梭框过程中最容易犯的错误是什么？

checkbox绑定的数据的数组忘记请空，这样删完第一次再删后面的很容易就出错了

3、js向数组中添加数据？

数组的push方法：this.data_right.push(this.data_left[item]);

4、js在数组中删除数据？

数组的splice方法：this.data_left.splice(item, 1);

5、js数组循环？

数组的forEach方法：this.check_val_left.forEach((item,index,array)=>{//执行代码});

6、js的sort排序？

就是需要写一个简单的排序函数，作为参数放到sort函数里面
this.check_val_left.sort(sortNumber);

function sortNumber(a, b)

{

    return b - a;

}

二、vue实现穿梭框效果

1、效果图

 

2、代码

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8"/>

     <title>穿梭框</title>

     <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

     <link rel="stylesheet" type="text/css" href="css/index.css">

     <script src='js/vue.js'></script>

     <script src='js/index.js'></script>

 </head>

 <body>

     <div id='my'>

         <div class="container">

             <div class="row">

                 <!--左侧-->

                 <div class="col-xs-5 col-sm-5" >

                     <div class="panel panel-success">

                         <!--标题-->

                         <div class="panel-heading">

                             <h3 class="panel-title">列表1<span>2</span></h3>

                         </div>

                         <!--内容-->

                         <div class="panel-body panel-height">

                             <ul>

                                 <li v-for="(data1,index) in data_left">

                                     <input :value="index" type="checkbox" v-model="check_val_left">

                                     {{data1.name}}

                                 </li>

                             </ul>

                         </div>

                     </div>

                 </div>

                 <!--中间-->

                 <div class="col-xs-2 col-sm-2 transfer">

                     <div class="transfer-table">

                         <a class="transfer-cell" @click="left_move()">>></a>

                         <a class="transfer-cell" @click="right_move()"><<</a>

                     </div>

                 </div>

                 <!--右侧-->

                 <div class="col-xs-5 col-sm-5" >

                     <div class="panel panel-success">

                         <!--标题-->

                         <div class="panel-heading">

                             <h3 class="panel-title">列表2 <span>2</span></h3>

                         </div>

                         <!--内容-->

                         <div class="panel-body panel-height">

                             <ul>

                                 <li v-for="(data2,index2) in data_right">

                                     <input :value="index2" type="checkbox" v-model="check_val_right">

                                     {{data2.name}}

                                 </li>

                             </ul>

                         </div>

                     </div>

                 </div>

             </div>

         </div>

    </div>

 </body>

 <script>

     var vue_my=new Vue({

         el: '#my',

         data: {

             data_left: [

                 {id:1,name:'北京'},

                 {id:2,name:'上海'},

                 {id:3,name:'深圳'},

             ],

             data_right: [

                 {id:11,name:'重庆'},

                 {id:12,name:'成都'},

                 {id:13,name:'贵州'},

             ],

             check_val_left:[],

             check_val_right:[],

         },

         methods:{

             left_move:function () {

                 //要把这个数组排序

                 this.check_val_left.sort(sortNumber);

                 this.check_val_left.forEach((item,index,array)=>{

                     //执行代码

                     //console.log(item);

                     //将data_left对应索引的数据移动到右边去

                     this.data_right.push(this.data_left[item]);

                     //console.log(this.data_left);

                     this.data_left.splice(item, 1);

                 });

                 //忘记把这个数组置空了

                 this.check_val_left=[];

             },

             right_move:function () {

                 //console.log(this.check_val_right);

                 this.check_val_right.sort(sortNumber);

                 this.check_val_right.forEach((item,index,array)=>{

                     //执行代码

                     //console.log(item);

                     //将data_left对应索引的数据移动到右边去

                     this.data_left.push(this.data_right[item]);

                     //console.log(this.data_left);

                     this.data_right.splice(item, 1);

                 });

                 this.check_val_right=[];

             }

         }

     })

 </script>

 <script>

     function sortNumber(a, b)

     {

         return b - a;

     }

 </script>

 </html>
 

vue实现穿梭框效果的更多相关文章

  1. vue Transfer 穿梭框

    Element Transfer组件默认支持单个list的穿梭 现业务需要支持两个list,效果如下 实现思路: 1.有选中才可穿梭 2.已穿梭源数据减少.目标增加(双向) 边界条件: 存储旧List ...

  2. 如何在vue+element中实现选择框和穿梭框的根据拼音以及拼音首字母以及汉字的模糊搜索

    1.汉字: 直接添加对应的 filterable     2.拼音: 穿梭框和选择器的实现方式有所不同   选择器:   <1>下载pinyin-match:   npm i --save ...

  3. vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询

    vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询 基于element Transfer http://element-cn.eleme.io/#/zh-CN/comp ...

  4. vue实现全选框效果

    vue实现全选框效果 一.总结 一句话总结: 全选的checkbox点击的时候判断这个checkbox的状态,如果没选中,说明下一个操作是选中所有 下面的每个checkbox判断一下是否所有的chec ...

  5. Vue实现拖拽穿梭框功能四种方式

    一.使用原生js实现拖拽 点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8 ...

  6. 【vue系列】elementUI 穿梭框右侧获取当前选中项的值的思路

    最近 做了一个需求 在查询结果的表格中,选取(可多选)一些值,获取到保单号后,打开一个elementUI的穿梭框,然后获取到所有业务员,选取一些业务员后,将上一步获取到的保单号传递给业务员. 画个示意 ...

  7. VUE+ElementUI实现左侧为树形结构、右侧无层级结构的穿梭框

    工作中遇到一个需求,需要将一个数据选择做成穿梭框,但是要求穿梭框左侧为树形结构.右侧为无层级结构的数据展示,ElementUI自身无法在穿梭框中添加树形结构,网上搜到了大佬封装的插件但是对于右侧的无树 ...

  8. krry-transfer ⏤ 基于 element 的升级版穿梭框组件发布到 npm 啦

    博客地址:https://ainyi.com/81 基于 element ui 的==升级版穿梭框组件==发布到 npm 啦 看过我之前博客的同学或许知道我之前写过关于 element 穿梭框组件重构 ...

  9. 基于Vue实现拖拽效果

    参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法.整体代码如下: <template> <!-- 卡片 --> <div clas ...

随机推荐

  1. Linux Centos7配置ftp服务器

    一.安装 1.安装 yum install  -y vsftpd 2.设置开机启动 systemctl enable vsftpd.service 3.启动 systemctl start vsftp ...

  2. css滑动门技术

    滑动门的核心技术: 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,以使自由拉伸滑动 利用css精灵(主要是背景位置)和盒子padding撑开宽度,以便适应不同字数的导航栏 一般经典布局 &l ...

  3. 逐步探究ObjC的Weak技术底层

    前言 之前的文章有说过 Atomic 原子操作的原理,其作为一个特殊的修饰前缀,影响了存取操作. 在属性修饰定义中,还有另一类修饰前缀,他们分别是 strong weak assign copy,这些 ...

  4. LINUX安装Tree软件包

     1.将镜像光盘放入光驱中 查看当前LINUX版本号:cat  /etc/redhat-release 2.挂载镜像文件 mount  /dev/cdrom /mnt mount :挂载设备命令 /d ...

  5. 连接MySQL报错误代码 ERROR 1045时的解决方案

            最近在做网站迁移的时候,遇到了一件很尴尬的事情,远程连接数据连不上了,一直报 错误号码1045 Access denied for user 'root'@xx.xxx.xxx.xx( ...

  6. 安装 ALC 解决 centos8 不能播放多媒体的问题

    装完centos8 后,发现看不到视频,听不到音乐,连web在线听音乐也不行.通过安装ALC可以解决. 1.三步安装VLC 这是 centos8 的安装包,曾使用 8 之前的版本安装是不成功的 sud ...

  7. C#当中使用async和await

    最近在写程序的时候,经常遇到大量需要异步访问的情况,但是对于async和await到底怎么写,还不是非常明确.于是参考<C#图解教程>了异步编程一节. 1.普通的程序怎么写? class ...

  8. 火狐新版移除developer Toolbar和无法关闭自动更新的解决

    随着火狐的不断更新已经更新到66版本了,近期注意到有个问题是火狐经常提示更新,更新了没多久,又时不时跳出更新的提示,不胜其烦. 在火狐的前期的版本中(大概4年之前吧)在Options菜单里是可以设置从 ...

  9. BZOJ 3308 毒瘤结论 网络流

    结论:在答案集合中的数其质因数最多有两个 且有两个的话一个>n1/2一个<n1/2 这样我们就可以把所有质数筛出来 弄成二分图 左边是<n1/2右边是>n1/2的 所以先把单个 ...

  10. 这些Winforms界面开发技巧你还没学会？OUT了

    DevExpress Winforms Controls内置140多个UI控件和库,完美构建流畅.美观且易于使用的应用程序.无论是Office风格的界面,还是分析处理大批量的业务数据,DevExpre ...