vue实现穿梭框功能（ES6语法）

1、vue两种实现穿梭框的方式。

方式一：Vue结合ES6语法实现穿梭框。（优点：自写组件复用性强，易修改）

方式二：引入Element中transfer插件简单写了CSS样式和HTML。（优点，引入组件即可，易上手操作）

2、实现效果：左边为复选框按钮，可全选可单选，选中后点击按钮到左侧。右边实现效果同理。并用计算属性动态计算出每个数组共多少条数据，选中了多少条。实现效果图如下：

自写组件：

 引入Element组件

3、方式一：样式代码实现

    逻辑代码实现：具体方法已加以说明。

 computed:{
	  // !!!计算属性是一个属性，不能直接传递值。方法可以直接传递值。因此以return的方式返回值
	  num(){//计算属性传递参数，根据传入的数组返回符合条件的长度
		  return data =>  data.filter(item=>item.check).length
	  }
  },
  //将左边数据放到右边
	  toright(){
		  // 用filter方法循环数组，将符合条件的数组返回
		  let selectdata = this.leftdata.filter(item => item.check == true)
		  this.rightdata.push(...selectdata) //将过滤后的数组需要添加到右边的数组中
		  this.leftdata = this.leftdata.filter(v =>!v.check)//留下左边数组没有没选中的数组
		  },
	 //将右边数据放到左边
	  toleft(){
		  let selectdata = this.rightdata.filter(item => item.check == true)
		  this.leftdata.push(...selectdata) 
		  this.rightdata = this.rightdata.filter(v =>!v.check)
	  },
	  //选中全部 当值全部选中是 全选按钮也选中，有一个不选中则都不选中
	  checkall(){
		  this.leftdata.forEach(v=>v.check = this.checkAll)
	  },
	  //当值全部选中是 全选按钮也选中，有一个不选中则都不选中
	  curcheck(){
		  this.checkAll = this.leftdata.every(v =>v.check)
	  },
	  //选中全部
	  checkall1(){
	  	 this.rightdata.forEach(v=>v.check = this.checkAll1)
	  },
	  curcheck1(){
	  	 this.checkAll1 = this.rightdata.every(v =>v.check)
	  }

 4、方式二：按需引入elementUi

import Vue from 'vue';
import { Transfer } from 'element-ui';
Vue.use(Transfer);

 如果大家有更好的方法欢迎评论留言~~