溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

js如何實現(xiàn)數(shù)組相鄰元素上移下移

發(fā)布時間：2020-07-23 15:14:08 來源：億速云 閱讀：574 作者：小豬 欄目：web開發(fā)

這篇文章主要為大家展示了js如何實現(xiàn)數(shù)組相鄰元素上移下移，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

實現(xiàn)效果：

js如何實現(xiàn)數(shù)組相鄰元素上移下移

即需要實現(xiàn)當(dāng)前元素與相鄰元素交換位置，

當(dāng)上移時，則是當(dāng)前元素與上一元素調(diào)換位置；當(dāng)下移時，則是當(dāng)前元素與下一元素調(diào)換位置。

實現(xiàn)代碼：

js:

//點擊上移
clickUp(index){
 this.swapArray(this.tableData, index-1, index);
},
//點擊下移
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ù)組中交換兩個元素的位置，使用splice（）的替換；

2.上移是跟上一元素交換位置，下移是跟下一元素交換位置，不同體現(xiàn)在調(diào)用調(diào)換方法時傳入的index參數(shù)不同。

以上就是關(guān)于js如何實現(xiàn)數(shù)組相鄰元素上移下移的內(nèi)容，如果你們有學(xué)習(xí)到知識或者技能，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手