基于js實(shí)現(xiàn)數(shù)組相鄰元素上移下移
實(shí)現(xiàn)效果:
即需要實(shí)現(xiàn)當(dāng)前元素與相鄰元素交換位置,
當(dāng)上移時(shí),則是當(dāng)前元素與上一元素調(diào)換位置;當(dāng)下移時(shí),則是當(dāng)前元素與下一元素調(diào)換位置。
實(shí)現(xiàn)代碼:
js:
//點(diǎn)擊上移 clickUp(index){ this.swapArray(this.tableData, index-1, index); }, //點(diǎn)擊下移 clickDown(index){ this.swapArray(this.tableData, index, index+1); }, //數(shù)組元素互換位置 swapArray(arr, index1, index2) { arr[index1] = arr.splice(index2, 1, arr[index1])[0]; return arr; },
html:
<el-table-column label="順序調(diào)整" min-width="80" align="center"> <template slot-scope="scope"> <div class="img_style"> <img src="@/assets/images/up_01.png" v-if="scope.$index == 0"> <img src="@/assets/images/up.png" @click="clickUp(scope.$index)" v-else> <img src="@/assets/images/down_01.png" v-if="scope.$index == tableData.length - 1"> <img src="@/assets/images/down.png" @click="clickDown(scope.$index)" v-else> </div> </template> </el-table-column>
注意:
1.思想就是在數(shù)組中交換兩個(gè)元素的位置,使用splice()的替換;
2.上移是跟上一元素交換位置,下移是跟下一元素交換位置,不同體現(xiàn)在調(diào)用調(diào)換方法時(shí)傳入的index參數(shù)不同。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js操作table中tr的順序?qū)崿F(xiàn)上移下移一行的效果
- JS與jQuery實(shí)現(xiàn)ListBox上移,下移,左移,右移操作功能示例
- js實(shí)現(xiàn)數(shù)組內(nèi)數(shù)據(jù)的上移和下移的實(shí)例
- Vue.js實(shí)現(xiàn)一個(gè)todo-list的上移下移刪除功能
- AngularJS實(shí)現(xiàn)數(shù)據(jù)列表的增加、刪除和上移下移等功能實(shí)例
- JS實(shí)現(xiàn)的表格操作類詳解(添加,刪除,排序,上移,下移)
- js實(shí)現(xiàn)Select列表各項(xiàng)上移和下移的方法
- JS實(shí)現(xiàn)點(diǎn)擊上移下移LI行數(shù)據(jù)的方法
- JS實(shí)現(xiàn)一個(gè)列表中包含上移下移刪除等功能
- js實(shí)現(xiàn)按鈕進(jìn)行某行上移下移
相關(guān)文章
javascript實(shí)現(xiàn)狀態(tài)欄中文字動(dòng)態(tài)顯示的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)狀態(tài)欄中文字動(dòng)態(tài)顯示的方法,涉及JavaScript基于時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10一些常用的JavaScript函數(shù)(json)附詳細(xì)說(shuō)明
一些常用的JavaScript函數(shù)(json)附詳細(xì)說(shuō)明,學(xué)習(xí)js的朋友可以參考下。2011-05-05angular bootstrap timepicker TypeError提示怎么辦
這篇文章主要介紹了angular bootstrap timepicker TypeError提示的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06Js實(shí)現(xiàn)復(fù)選框的全選、全不選反選功能代碼實(shí)例
這篇文章主要介紹了Js實(shí)現(xiàn)復(fù)選框的全選、全不選和反選,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02JS實(shí)現(xiàn)淡藍(lán)色簡(jiǎn)潔豎向Tab點(diǎn)擊切換效果
這篇文章主要介紹了JS實(shí)現(xiàn)淡藍(lán)色簡(jiǎn)潔豎向Tab點(diǎn)擊切換效果,通過(guò)JavaScript相應(yīng)鼠標(biāo)事件實(shí)現(xiàn)非常簡(jiǎn)單的css樣式切換,簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-10-10JavaScript手寫(xiě)源碼之omit函數(shù)的實(shí)現(xiàn)
最近突然有個(gè)新的想法,想去看看前端的小庫(kù)來(lái)提升自己的編碼能力。但是又不知道怎么去證明自己是否真的看懂了,那就實(shí)現(xiàn)一個(gè)omit函數(shù)吧2023-02-02如何將一維度數(shù)組轉(zhuǎn)換成三維數(shù)組結(jié)構(gòu)
在開(kāi)發(fā)過(guò)程中,可能會(huì)遇到需要將一維數(shù)組轉(zhuǎn)換為多維數(shù)組的情況,以滿足特定數(shù)據(jù)結(jié)構(gòu)的需求,文章介紹了如何將后端返回的一維列表數(shù)據(jù)通過(guò)編程方法轉(zhuǎn)換成三維數(shù)組結(jié)構(gòu),以適應(yīng)特定的UI展示需求,通過(guò)循環(huán)遍歷和數(shù)據(jù)重組的方式,可以有效地實(shí)現(xiàn)數(shù)組結(jié)構(gòu)的轉(zhuǎn)換2024-09-09JavaScript實(shí)現(xiàn)無(wú)刷新上傳預(yù)覽圖片功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)無(wú)刷新上傳預(yù)覽圖片功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08script不刷新頁(yè)面的聯(lián)動(dòng)前后代碼
如何實(shí)現(xiàn)script不刷新頁(yè)面的聯(lián)動(dòng),在本文有個(gè)不錯(cuò)的示例或許對(duì)大家有所幫助2013-09-09