vue版本穿梭框

本文介绍了如何在Vue中实现穿梭框功能,包括定义左右两侧数据、筛选与追加操作、使用filter方法处理数据,以及封装公共方法和计算属性来获取选中数量,并讨论了性能优化和禁用穿梭按钮的实现细节。
摘要由CSDN通过智能技术生成

1、 定义两个数组,分别是左侧数据和右侧数据
2、 右侧的数据追加左侧选中的状态
3、 把左侧的数据进行过滤的处理(filter)对当前数组过滤处理,返回的是满足条件的数组

var selectData = this.leftData.filter(function(item){
    return  item.check=true
});

4、 未封装的写法
(1)es5 合并数组
this.rightData = this.rightData.concat(selectData);
(2)es6 扩展运算符 … (序列化) a1 = [1,2] a2=[3,4] a3=[…a1,…a2]
this.rightData = […this.rightData,…selectData];
(3) this.rightData.push(…selectData);
5、 把左边的数组只剩下false的

this. leftData = this.leftData.filter(function(item){
    return  item.check=false
});

6、 //封装公共方法
toRight:function(){
var selectData = this.filterData(this.leftData,true);
this.rightData.push(…selectData);
this.leftData = this.filterData(this.leftData,false)
};
filterData:function(data,type){
return data.filter(function(item){
r

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值