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

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

        // 上移，下移
        onMove(code, dir) {
            let moveComm = (curIndex, nextIndex) => {
                let arr = this.stack.selAwardList
                arr[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 + 1
                        this.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个索引的赋值。

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