js如何实现数组数据的上移下移

Vue项目开发中碰到对表格数据实现上移，下移的需求，只是纯前端实现移动数组数据，不跟服务端做交互。

经研究，用splice方法简洁优雅，具体实现如下：

        // 上移，下移onMove(code, dir) {let moveComm = (curIndex, nextIndex) => {let arr = this.stack.selAwardListarr[curIndex] = arr.splice(nextIndex, 1, arr[curIndex])[0]return arr}this.stack.selAwardList.some((val, index) => {if (val.awardCode === code) {if (dir === 1 && index === 0) {this.$message.warning('已在顶部！')} else if (dir === 0 && index === this.stack.selAwardList.length - 1) {this.$message.warning('已在底部！')} else {let nextIndex = dir === 1 ? index - 1 : index + 1this.stack.selAwardList = moveComm(index, nextIndex)}return true}return false})}

解释一下实现原理：

1、onMove()方法的传参code是this.stack.selAwardList数组元素的属性，用some遍历循环找到该数据在数组中的索引值（index）后停止遍历循环，dir传1表示上移，传0表示下移，根据dir的值得出nextIndex的索引值。

2、moveComm方法实现调换索引数据后返回换位后的数组。arr[curIndex] = arr.splice(nextIndex, 1, arr[curIndex])[0]做了3件事：

第一件：arr.splice(nextIndex, 1）删除下个索引的数据

第二件：arr.splice(nextIndex, 1, arr[curIndex])用当前索引数据（arr[curIndex]）替换下个索引的数据

第三件：arr[curIndex] = arr.splice(nextIndex, 1, arr[curIndex])[0]当arr.splice()方法执行后会返回删除的数据，并将删除的数据赋值给当前索引

说的有点啰嗦，总的意思是这句代码同时完成了2个索引的赋值。

大家有其他更优雅的实现方法欢迎提出。

js如何实现数组数据的上移下移相关推荐

前端js实现表格数据的上移下移
vue项目需求中需要前端实现表格行数据的上移下移,效果如下实现思路:主要使用前端对数组的操作方法splice() 代码: tableData: [{name: '1',id: '1'}, {name ...
JS题目之数组数据拆分重组转成嵌套对象,让脑细胞活跃下
前言下班的时候在群里看到一个小伙伴,在群里问了一道js的题,发现没人理会他; 来了兴趣就折腾了下,以下是解答过程,用的是ES6+的特性,在chrome跑的; 有兴趣的小伙伴可以瞧瞧~~谢谢题目效 ...
js+springMVC 提交数组数据到后台
1.ajax 代码 var ids =new Array(); $.ajax({type: "POST",url: "/user/downReport",dat ...
html ul 位置上移,JS移动li行数据，点击上移下移（是位置的互换，不是top的偏移量改变）...
JS移动li行数据,点击上移下移 * { padding:0; margin:0; } .content {width:500px;margin:20px auto;} #pCon {width:50 ...
数据上移下移简单的存储过程
上移下移存储过程改存储过程只有两个参数,要移动的id和排序的方式.tabelname需要动态的改变! WG_sysConfig是要改变的哦tabelName,id是排序主键,orderid是排序字段 ...
vue 删除两个集合中相同的数据_vue.js如何删除数组里面的数据
vue.js如何删除数组里面的数据发布时间:2020-12-10 12:04:44 来源:亿速云阅读:107 作者:小新这篇文章主要介绍了vue.js如何删除数组里面的数据,具有一定借鉴价值,需 ...
java集合转js数值_前端js调用接口转换Map数组数据
返回Map数据后端接口返回数据格式 { "code": 1, "msg": "操作成功!", "count": 0, ...
JS二维数组转树形数据
JS二维数组转树形数据 // 测试数据const arr = [{ id: '1', pid: '0', name: 'jack', age: 20 },{ id: '2', pid: '0', na ...
html5处理json数据,js解析json数组
js读取解析JSON类型数据 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 Jav ...

js如何实现数组数据的上移下移

js如何实现数组数据的上移下移相关推荐

最新文章

热门文章