- 實現穿梭框功能，效果圖如下所示：

.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="transferxDtpHMUO" >
    <!-- 左框 -->
    <ul class="list left">
        <template v-for="(item,index) in info">
            <li :key="index">
                <input type="checkbox" :id=`checkbox${itwww.cppcns.comem.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>

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(){
       www.cppcns.com
 
 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)); // 拷貝原資料,index )=>{
            // 執行 select 為true 的資料
            if (item.select){
                that.info = that.info.concat(item).sort((a,排序
                delete ixDtpHMUOnfo[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 穿梭框內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！