站长图库

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

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

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

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



评论(0)条

    站长图库

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

    猜你喜欢
    食刻外卖系统源码+商户端+配送端+小程序+APP源码全部开源完美运营

    食刻外卖系统源码+商户端+配送端+小程序+APP源码全部开源完美运营

    微信源码 619 2020-03-16

    原生系统源码(包含后端源码,APP源码,小程序源码配送端,商户端,用户端全部开源APP为混合开发)

    HTML5响应式少儿舞蹈培训学校网站模板

    HTML5响应式少儿舞蹈培训学校网站模板

    HTML模版 259 2020-01-10

    HTML5响应式少儿舞蹈培训学校网站模板,自适应分辨率,兼容PC端和移动端,全套模板,包括首页、关于我们、课程展示、师资...

    快乐情人节矢量剪贴画矢量素材下载

    快乐情人节矢量剪贴画矢量素材下载

    UI元素 157 2020-02-21

    快乐情人节矢量剪贴画矢量素材,适用于情人节场景设计使用。

    WordPress企业主题分享/小微企业公司官网主题

    WordPress企业主题分享/小微企业公司官网主题

    WordPress模版 283 2020-05-08

    WordPress企业主题分享/小微企业公司官网主题,适用于各行业小微企业的公司官方网站,多用途通用wordpress主...