站长图库

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

 发布时间 2019-12-30 17:39:20 热度  64

 Tag标签:  数组数据上移下移
广告
广告
广告
广告
广告
广告

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个索引的赋值。

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



站长图库

站长素材 - 建站资源分享平台

猜你喜欢
替换uploadify用Huploadify实现上传图片或文件

替换uploadify用Huploadify实现上传图片或文件

前端开发 68 2019-12-25

之前项目用uploadify(flash version)实现图片上传功能,但是由于chrome浏览器已经屏蔽...

TAG:园艺wordpress博客模板

让padding、border等不占据高宽度的方法

让padding、border等不占据高宽度的方法

前端开发 753 2019-04-30

今天在仿一个网站的时候,发现所有的padding、border等都不占据高度、宽度,导致很多地方要去重新调试高...

TAG:园艺wordpress博客模板

一键开启网页夜间模式代码

一键开启网页夜间模式代码

前端开发 821 2019-01-08

1、在浏览器新建书签(收藏夹)2、在网址栏输入:javascript:var%20a=document.cre...

TAG:园艺wordpress博客模板

京东图床上传接口 PHP源码

京东图床上传接口 PHP源码

前端开发 858 2019-04-20

站长在制作网站的时候,前期往往投入都有限,而图片有事比较占用服务器空间的,所以都会选择使用图床,但是哪里的图床...

TAG:园艺wordpress博客模板