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 的數據，添加到新數據框中，再把原先的刪除