本篇内容介绍了“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
<div class="transfer" >
<!-- 左框 -->
<ul class="list left">
<template v-for="(item, index) in info">
<li :key="index">
<input type="checkbox" :id=`checkbox${item.id}` name="checkbox" :checked="item.select" @click="item.select=!item.select" />
<label :for=`checkbox${item.id}` >{{ item.name }} </label>
</li>
</template>
</ul>
<!-- 添加/删除 -->
<div class="content">
<p class="push" @click='push' >>>></p>
<p class="del" @click='del' ><<<</p>
</div>
<!-- 右框 -->
<ul class="list right">
<template v-for="(item, index) in new_info">
<li :key="index" >
<input type="checkbox" :id=`newcheckbox${item.id}` name="newcheckbox" :checked="item.select" @click="item.select=!item.select" />
<label :for=`newcheckbox${item.id}`>{{ item.name }} </label>
</li>
</template>
</ul>
</div>js
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实现穿梭框功能的代码是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
