您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“Vue實現(xiàn)穿梭框功能的代碼是什么”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
Vue - 實現(xiàn)穿梭框功能,效果圖如下所示:
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{ // 原數(shù)據(jù),左框數(shù)據(jù) 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: [],// 新數(shù)據(jù),右框數(shù)據(jù) } }, methods:{// 添加數(shù)據(jù) push(){ let that = this; let info = JSON.parse(JSON.stringify(that.info)); // 拷貝原數(shù)據(jù), 深拷貝 info.forEach((item, index )=>{ // 執(zhí)行 select 為true 的數(shù)據(jù) if (item.select){ that.new_info = that.new_info.concat(item).sort((a,b)=>{ return a.id - b.id }); // 添加到新數(shù)據(jù)框, 排序 delete info[index]; // 刪除數(shù)據(jù) item.select = false; } }) info = info.filter(function (val) { return val }); // 過濾 undefined that.info = info; // 更新原數(shù)據(jù)\ }, // 移除數(shù)據(jù) del(){ let that = this; let info = JSON.parse(JSON.stringify(that.new_info)); // 拷貝原數(shù)據(jù), 深拷貝 info.forEach((item, index )=>{ // 執(zhí)行 select 為true 的數(shù)據(jù) if (item.select){ that.info = that.info.concat(item).sort((a,b)=>{ return a.id - b.id }); // 添加到新數(shù)據(jù)框, 排序 delete info[index]; // 刪除數(shù)據(jù) item.select = false; } }) info = info.filter(function (val) { return val }); // 過濾 undefined that.new_info = info; // 更新原數(shù)據(jù) }, }, mounted(){ let that = this; // 給原始數(shù)據(jù)添加一個 select 字段,判斷是否選中 that.info.map((val,key)=>{ that.$set(val,'select',false) }); }
********************************************************************************************************************************************************
這里使用splice刪除數(shù)據(jù)會有問題 this.info.splice(index,1);當選中多個元素時,會發(fā)現(xiàn)只刪除掉其中一些元素,而還有一些選中的元素還存在因為當刪除掉了一個元素后,數(shù)組的索引發(fā)生的變化,造成了程序的異常。所以就使用了 delete清除數(shù)據(jù),然后再 filter過濾 undefined大概思路: 給數(shù)據(jù)添加一個 select 字段,用多選框的 checked 綁定, click 的時候該字段實現(xiàn)取反轉移數(shù)據(jù)時,只執(zhí)行 select 為 true 的數(shù)據(jù),添加到新數(shù)據(jù)框中,再把原先的刪除
“Vue實現(xiàn)穿梭框功能的代碼是什么”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。