vue实现穿梭框效果

转载

mob604756fe27f4 2019-10-25 21:02:00

文章标签 vue 数组 css 数据 html 文章分类 运维

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、效果图

vue实现穿梭框效果_vue

2、代码

1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8"/>
  5     <title>穿梭框</title>
  6     <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  7     <link rel="stylesheet" type="text/css" href="css/index.css">
  8     <script src='js/vue.js'></script>
  9     <script src='js/index.js'></script>
 10 </head>
 11 <body>
 12     <div id='my'>
 13         <div class="container">
 14             <div class="row">
 15                 <!--左侧-->
 16                 <div class="col-xs-5 col-sm-5" >
 17                     <div class="panel panel-success">
 18                         <!--标题-->
 19                         <div class="panel-heading">
 20                             <h3 class="panel-title">列表1<span>2</span></h3>
 21                         </div>
 22                         <!--内容-->
 23                         <div class="panel-body panel-height">
 24                             <ul>
 25 
 26                                 <li v-for="(data1,index) in data_left">
 27                                     <input :value="index" type="checkbox" v-model="check_val_left">
 28                                     {{data1.name}}
 29                                 </li>
 30                             </ul>
 31                         </div>
 32                     </div>
 33                 </div>
 34                 <!--中间-->
 35                 <div class="col-xs-2 col-sm-2 transfer">
 36                     <div class="transfer-table">
 37                         <a class="transfer-cell" @click="left_move()">>></a>
 38                         <a class="transfer-cell" @click="right_move()"><<</a>
 39                     </div>
 40 
 41                 </div>
 42                 <!--右侧-->
 43                 <div class="col-xs-5 col-sm-5" >
 44                     <div class="panel panel-success">
 45                         <!--标题-->
 46                         <div class="panel-heading">
 47                             <h3 class="panel-title">列表2 <span>2</span></h3>
 48                         </div>
 49                         <!--内容-->
 50                         <div class="panel-body panel-height">
 51                             <ul>
 52                                 <li v-for="(data2,index2) in data_right">
 53                                     <input :value="index2" type="checkbox" v-model="check_val_right">
 54                                     {{data2.name}}
 55                                 </li>
 56                             </ul>
 57                         </div>
 58                     </div>
 59                 </div>
 60             </div>
 61         </div>
 62    </div>
 63 </body>
 64 
 65 <script>
 66     var vue_my=new Vue({
 67         el: '#my',
 68         data: {
 69             data_left: [
 70                 {id:1,name:'北京'},
 71                 {id:2,name:'上海'},
 72                 {id:3,name:'深圳'},
 73             ],
 74             data_right: [
 75                 {id:11,name:'重庆'},
 76                 {id:12,name:'成都'},
 77                 {id:13,name:'贵州'},
 78             ],
 79             check_val_left:[],
 80             check_val_right:[],
 81         },
 82         methods:{
 83             left_move:function () {
 84                 //要把这个数组排序
 85                 this.check_val_left.sort(sortNumber);
 86                 this.check_val_left.forEach((item,index,array)=>{
 87                     //执行代码
 88                     //console.log(item);
 89                     //将data_left对应索引的数据移动到右边去
 90                     this.data_right.push(this.data_left[item]);
 91                     //console.log(this.data_left);
 92                     this.data_left.splice(item, 1);
 93                 });
 94                 //忘记把这个数组置空了
 95                 this.check_val_left=[];
 96             },
 97             right_move:function () {
 98                 //console.log(this.check_val_right);
 99                 this.check_val_right.sort(sortNumber);
100                 this.check_val_right.forEach((item,index,array)=>{
101                     //执行代码
102                     //console.log(item);
103                     //将data_left对应索引的数据移动到右边去
104                     this.data_left.push(this.data_right[item]);
105                     //console.log(this.data_left);
106                     this.data_right.splice(item, 1);
107                 });
108                 this.check_val_right=[];
109             }
110         }
111     })
112 </script>
113 
114 <script>
115     function sortNumber(a, b)
116     {
117         return b - a;
118     }
119 </script>
120 
121 </html>