Vue项目开发中碰到对表格数据实现上移，下移的需求，只是纯前端实现移动数组数据，不跟服务端做交互。
经研究，用splice方法简洁优雅，具体实现如下：
//上移，下移onMove(code,dir){letmoveComm=(curIndex,nextIndex)=>{letarr=this.stack.selAwardListarr[curIndex]=arr.splice(nextIndex,1,arr[curIndex])[0]returnarr}this.stack.selAwardList.some((val,index)=>{if(val.awardCode===code){if(dir===1&&index===0){this.$message.warning('已在顶部！')}elseif(dir===0&&index===this.stack.selAwardList.length-1){this.$message.warning('已在底部！')}else{letnextIndex=dir===1?index-1:index+1this.stack.selAwardList=moveComm(index,nextIndex)}returntrue}returnfalse})}
解释一下实现原理：
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个索引的赋值。
大家有其他更优雅的实现方法欢迎提出。
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/35939.html；
