基于js實現(xiàn)數組相鄰元素上移下移
更新時間:2020年05月19日 09:10:18 作者:蘇小落
這篇文章主要介紹了基于js實現(xiàn)數組相鄰元素上移下移,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
實現(xiàn)效果:

即需要實現(xiàn)當前元素與相鄰元素交換位置,
當上移時,則是當前元素與上一元素調換位置;當下移時,則是當前元素與下一元素調換位置。
實現(xiàn)代碼:
js:
//點擊上移
clickUp(index){
this.swapArray(this.tableData, index-1, index);
},
//點擊下移
clickDown(index){
this.swapArray(this.tableData, index, index+1);
},
//數組元素互換位置
swapArray(arr, index1, index2) {
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
return arr;
},
html:
<el-table-column label="順序調整" 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.思想就是在數組中交換兩個元素的位置,使用splice()的替換;
2.上移是跟上一元素交換位置,下移是跟下一元素交換位置,不同體現(xiàn)在調用調換方法時傳入的index參數不同。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js操作table中tr的順序實現(xiàn)上移下移一行的效果
- JS與jQuery實現(xiàn)ListBox上移,下移,左移,右移操作功能示例
- js實現(xiàn)數組內數據的上移和下移的實例
- Vue.js實現(xiàn)一個todo-list的上移下移刪除功能
- AngularJS實現(xiàn)數據列表的增加、刪除和上移下移等功能實例
- JS實現(xiàn)的表格操作類詳解(添加,刪除,排序,上移,下移)
- js實現(xiàn)Select列表各項上移和下移的方法
- JS實現(xiàn)點擊上移下移LI行數據的方法
- JS實現(xiàn)一個列表中包含上移下移刪除等功能
- js實現(xiàn)按鈕進行某行上移下移
相關文章
javascript實現(xiàn)狀態(tài)欄中文字動態(tài)顯示的方法
這篇文章主要介紹了javascript實現(xiàn)狀態(tài)欄中文字動態(tài)顯示的方法,涉及JavaScript基于時間函數動態(tài)操作頁面元素屬性的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
angular bootstrap timepicker TypeError提示怎么辦
這篇文章主要介紹了angular bootstrap timepicker TypeError提示的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06
JavaScript手寫源碼之omit函數的實現(xiàn)
最近突然有個新的想法,想去看看前端的小庫來提升自己的編碼能力。但是又不知道怎么去證明自己是否真的看懂了,那就實現(xiàn)一個omit函數吧2023-02-02

