基于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参数不同。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解js删除数组中的指定元素

    详解js删除数组中的指定元素

    本篇文章将会给大家介绍两种删除数组中的指定元素的方式,分别为: 1.单独定义一个的函数,通过函数来删除指定数组元素. 2.为Array对象定义了一个removeByValue的方法,在调用方法来删除指定数组元素,调用非常简单的. 下面我们通过简单的代码示例来简单介绍这两种删除数组指定元素的方式. 1.定义单独的函数removeByValue来进行元素删除 代码示例:删除数组somearray里的"tue"元素 <!DOCTYPE html> <html> <

  • JS如何在数组指定位置插入元素

    一.JavaScript splice() 方法 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. 方法实例 //在数组指定位置插入 var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi"); //输出结果 //Banana, Orange,

  • JS在Array数组中按指定位置删除或添加元素对象方法示例

    JavaScript的数据中可通过splice/slice在指定位置添加或删除元素.另外还有slice.delete等方法实现. splice简介 splice方法向/从数组中添加/删除项目,然后返回被删除的项目. 该方法会改变原始数组. arrayObject.splice(index, howmany, item1, ..., itemX) 参数 描述 index 必需.整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置. howmany 必需.要删除的项目数量.如果设置为 0,

  • JS实现根据指定值删除数组中的元素操作示例

    本文实例讲述了JS实现根据指定值删除数组中的元素操作.分享给大家供大家参考,具体如下: 解决问题: 1 .JS判断元素是否在数组内 2. JS根据指定值删除数组中的元素 要点:相当于jquery 的 $.inArray() 这个方法 原生js 如果想删除数组,有一个函数 splice()   ~~ 删除元素,并向数组添加新元素. 这个货 是根据数组内的下标 也就是索引来 删除元素的比如: var arrList = ['a','b','c','d']; arrList.splice(2,1);

  • JS判断数组里是否有重复元素的方法小结

    本文实例讲述了JS判断数组里是否有重复元素的方法.分享给大家供大家参考,具体如下: 第一种方法:但是下面的这种方法数字字符串类似相同,返回的还是真,有点不靠谱,如果是其它的字符是可以的 var ary11 = new Array("1", "ff", "11", "aa", "2222"); // 验证重复元素,有重复返回true:否则返回false function mm(a) { return /(\x

  • javascript删除数组元素的七个方法示例

    前言 在JavaScript中,除了Object之外,Array类型(数组)恐怕就是最常用的类型了.与其他语言的数组相比,JavaScript中的Array非常灵活.这种灵活性有利有弊,好处是其富有创造性,可以提供各种灵活的解决方案:坏处是容易脑子不够用,因为事实上,它太灵活了,灵活到无法控制的抓狂. 前面调侃了几句,回归正题,这里要总结7个在JavaScript中删除Array元素的方法,分别是利用length属性.delete关键字.pop()栈方法.shift()队列方法.splice()

  • 详解JS取出两个数组中的不同或相同元素

    1.取出两个数组的不同元素 var arr1 = [0,1,2,3,4,5]; var arr2 = [0,4,6,1,3,9]; function getArrDifference(arr1, arr2) { return arr1.concat(arr2).filter(function(v, i, arr) { return arr.indexOf(v) === arr.lastIndexOf(v); }); } console.log(getArrDifference(arr1,arr2

  • 基于js实现数组相邻元素上移下移

    实现效果: 即需要实现当前元素与相邻元素交换位置, 当上移时,则是当前元素与上一元素调换位置:当下移时,则是当前元素与下一元素调换位置. 实现代码: js: //点击上移 clickUp(index){ this.swapArray(this.tableData, index-1, index); }, //点击下移 clickDown(index){ this.swapArray(this.tableData, index, index+1); }, //数组元素互换位置 swapArray(

  • Vue.js实现一个todo-list的上移下移删除功能

    Vue.js实现一个todo-list的上移下移删除功能

    如图,A simple todo-list长这样 这是一个基于vue.js的一个简单的todo-list小demo.首先要实现添加非空list,点击list切换finished状态这样的一个效果,推荐学习地址---->点击打开链接 接下来是实现的一个上移,下移,删除的效果图: 删除效果: 讲一下思路: 上移-----首先将鼠标所指list的内容插入到上一条上面,然后删除鼠标所指的list(也就是this.items[index]),运行代码便可实现上移的效果,或者将上下两条list的内容进行调换

  • JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例

    JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例

    本文实例讲述了JS与jQuery实现ListBox上移,下移,左移,右移操作功能.分享给大家供大家参考,具体如下: 先来看看Javascript版选择下拉菜单互移且排序操作: <html> <head> <title>Javascript版选择下拉菜单互移且排序</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"&

  • js过滤数组重复元素的方法

    复制代码 代码如下: function filterArray(str,array){ //此函数为过滤数组中重复的元素,并不允许插入空值,函数返回数组 var isnull = false; if(str == "" || str == null || str == 'undefined'){ isnull = true; } var newnum = 0; var newarray = []; var num = array.length; if(num == 0){ if(!is

  • js 处理数组重复元素示例代码

    复制代码 代码如下: function doSz{ var kzly==["a","a","c","a","b"]; for(var i=0;i<kzly.length;i++){ var targetNode = kzly[i]; for (var j=0; j<i; j++) { if(targetNode == kzly[j]){ kzly.splice(i,1); kzlymc.spli

  • JavaScript实现删除数组重复元素的5种常用高效算法总结

    本文实例讲述了JavaScript实现删除数组重复元素的5种常用高效算法.分享给大家供大家参考,具体如下: 这里就 js 如何实现数组去重整理出5种方法,并附上演示Demo 以及 源码. 1.遍历数组法 最简单的去重方法, 实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中:注意点:判断值是否在数组的方法"indexOf"是ECMAScript5 方法,IE8以下不支持,需多写一些兼容低版本浏览器代码,源码如下: // 最简单数组去重法 function unique1

  • js实现数组内数据的上移和下移的实例

    实例如下所示: var swapItems = function(arr, index1, index2){ arr[index1] = arr.splice(index2,1,arr[index1])[0] return arr } var arr = [1,2,3] var newArr = [] upData (arr, index) { if (this.arr.length > 1 && index !== 0) { newArr = swapItems(arr, inde

  • js中数组插入、删除元素操作的方法

    实例如下: /* * 删除数组元素:Array.removeArr(index) */ Array.prototype.removeArr = function (index) { if (isNaN(index) || index>= this.length) { return false; } this.splice(index, 1); } /* * 插入数组元素:Array.insertArr(dx) */ Array.prototype.insertArr = function (in

  • js从数组中删除指定值(不是指定位置)的元素实现代码

    引用自百度知道里面的一个问答 例如数组{1,2,3,4,5} 要把数组里面的3删除得到{1,2,4,5} js代码: <script type="text/javascript"> Array.p Array.prototype.indexOf = function(val) { //prototype 给数组添加属性 for (var i = 0; i < this.length; i++) { //this是指向数组,this.length指的数组类元素的数量 i

随机推荐