Vue|Vue 实现穿梭框功能的详细代码 Vue实现穿梭框功能的详细代码

Vue - 实现穿梭框功能，效果图如下所示：
【Vue|Vue 实现穿梭框功能的详细代码】
文章图片

css

.transfer{display: flex; justify-content: center; align-items: center; }.transfer>.list {width: 200px; height: 300px; border: 1px solid #000; list-style: none; }.content{font-size: 30px; margin: 0 20px; }.list>li{padding: 5px; box-sizing: border-box; }

HTML

>>>
<<<

data(){return{// 原数据，左框数据info:[{id:'1',name:'小明'},{id:'2',name:'小红'},{id:'3',name:'小鸡'},{id:'4',name:'哈哈哈哈'},{id:'5',name:'啊啊啊啊'},{id:'6',name:'dddd'},{id:'7',name:'qwert'},],new_info: [],// 新数据，右框数据}},methods:{// 添加数据push(){let that = this; let info = JSON.parse(JSON.stringify(that.info)); // 拷贝原数据, 深拷贝info.forEach((item, index )=>{// 执行 select 为true 的数据if (item.select){that.new_info = that.new_info.concat(item).sort((a,b)=>{ return a.id - b.id }); // 添加到新数据框, 排序delete info[index]; // 删除数据item.select = false; }})info = info.filter(function (val) { return val }); // 过滤 undefined that.info = info; // 更新原数据\},// 移除数据del(){let that = this; let info = JSON.parse(JSON.stringify(that.new_info)); // 拷贝原数据, 深拷贝info.forEach((item, index )=>{// 执行 select 为true 的数据if (item.select){that.info = that.info.concat(item).sort((a,b)=>{ return a.id - b.id }); // 添加到新数据框, 排序delete info[index]; // 删除数据item.select = false; }})info = info.filter(function (val) { return val }); // 过滤 undefined that.new_info = info; // 更新原数据},},mounted(){let that = this; // 给原始数据添加一个 select 字段，判断是否选中that.info.map((val,key)=>{ that.$set(val,'select',false) }); }

********************************************************************************************************************************************************
这里使用splice删除数据会有问题 this.info.splice(index,1); 当选中多个元素时，会发现只删除掉其中一些元素，而还有一些选中的元素还存在因为当删除掉了一个元素后，数组的索引发生的变化，造成了程序的异常。所以就使用了 delete清除数据，然后再 filter过滤 undefined大概思路：给数据添加一个 select 字段，用多选框的 checked 绑定， click 的时候该字段实现取反转移数据时，只执行 select 为 true 的数据，添加到新数据框中，再把原先的删除
到此这篇关于Vue 实现穿梭框功能的详细代码的文章就介绍到这了,更多相关Vue 穿梭框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！