简介Vue项目开发中碰到对表格数据实现上移，下移的需求，只是纯前端实现移动数组数据，不跟服务端做交互。经研究，用splice方法简洁优雅，具体实现如下：//上移，下移onMove(code,dir){letmoveComm=(curIndex,nextIndex)=>{letarr=this.stack.selAwardListarr[curIndex]=arr.splice(nextIndex,1,
Vue项目开发中碰到对表格数据实现上移，下移的需求，只是纯前端实现移动数组数据，不跟服务端做交互。
经研究，用splice方法简洁优雅，具体实现如下：
//上移，下移 (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、 ()方法的传参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个索引的赋值。
大家有其他更优雅的实现方法欢迎提出。
下载链接：网站源码/小程序源码/网站模板下载
