• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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 实现穿梭框功能的详细代码的文章就介绍到这了,更多相关Vue 穿梭框内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
React国际化react-i18next详解发布时间:2022-02-05
下一篇:
微信小程序二维码生成工具 weapp-qrcode详解发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap