基于js实现数组相邻元素上移下移
作者：苏小落 发布时间：2024-07-11 01:01:34
标签：js,数组,元素
实现效果：
即需要实现当前元素与相邻元素交换位置，
当上移时，则是当前元素与上一元素调换位置；当下移时，则是当前元素与下一元素调换位置。
实现代码：
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.上移是跟上一元素交换位置，下移是跟下一元素交换位置，不同体现在调用调换方法时传入的index参数不同。
来源：https://www.cnblogs.com/5201314m/p/12901755.html
0
投稿猜你喜欢
正则表达式正则表达式(Regular Expression)是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为&q- 系列前言这个系列是我第一个想要更下去的系列。每篇会全面介绍一个 OpenCV 函数，会给出 API 和示例。示例主要是用 Python 去写
- 终于能出来透口气，写点东西了。前段太忙，也很郁闷，现在调整过来点了。我的设计原则就是在满足需求的前提下，尽可能的简化，简化，再简化。有一次跟
- 正在看的ORACLE教程是:ORACLE常见错误代码的分析与解决三。 -----------------------------
- 练手项目，先上图先实现一个简单的串口工具，为之后的上位机做准备代码如下：github 下载地址pyserial_demo.pyimport
- 本文将详细介绍一下如何搭建深度学习所需要的实验环境.这个框架分为以下六个模块显卡简单理解这个就是我们常说的GPU,显卡的功能是一个专门做矩阵
- 前言最近在开发行为验证码，经常触及到关于验证类型的相关内容。但使用起来不太熟练，闲暇之余，总结一下我对行为验证码验证类型的理解。验证类型概述
- 原理：使用js的定时任务函数setInterval设置时间，然后触发关闭事件参数说明title：提示框的标题msg：提示信息内容ico：显示
- 条件判断计算机之所以能做很多自动化的任务，因为它可以自己做条件判断。比如，输入用户年龄，根据年龄打印不同的内容，在Python程序中，用if
- mysql版本：8.0.28xtrabackup版本：8.0.281、安装xtrabackup下载地址：Download Percona X
- 循环加载模块假设你有两个文件，a.py和b.py，在这两个文件中互相加载对方，例如：在a.py中：import bdef f():retur
- 本文实例为大家分享了python实现定时发送邮件的具体代码，供大家参考，具体内容如下一、发送邮件import smtplib from em
- 在大多数场景中，我们都用 lxml 库解析网页源码，但你是否知道，lxml 库也是可以操作 svg 图片的。我们可以使用
- 引言本文讨论 ChatGTP 与 Node.js 的结合，由于最近在学 Remix, 考虑到 Remix 可以单独的作为 API 来使用，并
- 一个写给别人的小代码顺便也贴上来这是一个滑动展示用的小容器通过鼠标移动和离开触发滑动效果<!DOCTYPE html PUBLIC &
- 方法一，利用 sheet.iter_rows() 获取 Sheet1 表中的所有行，然后遍历import openpyxl wb = ope
- 目录while语句if 语句for语句BreakContinuePass流程控制无非就是if else之类的控制语句，今天我们来看一下Pyt
- 昨天同事给你我一个有问题的数据库，叫我修复一下因为客户那边需要这个数据库，这个数据库只有一个mdf文件和一个ldf文件，当我附加数据库的时候
- 1、变量和类型变量是一种存储数据的载体，也就是一个容器。计算机中的变量是实际存在的数据或者说是存储器中存储数据的一块内存空间，变量的值可以被
- 给出地球上两点的经纬度，计算两点之间的球面距离。给出地球上三点的经纬度，求形成的三角形面积。对于这样的需求，可以通过使用半正失公式来计算得到
