• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > JS如何实现数组数据的上移下移

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

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了JS如何实现,数组数据上移下移等相关知识,希望对您有所帮助

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

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



分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

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

相关文章

  • 2022-04-29正则表达式解决input框固定输入值的格式(金额,特殊字符)
  • 2022-04-29精收录和精内容对于网站发展更加重要
  • 2022-04-29PHP正则表达式字符如何转义
  • 2022-04-29改用Server酱Turbo版推送WordPress评论
  • 2022-04-29JavaScript中如何替换字符串?3种方法介绍
  • 2022-04-29php htmlentities 乱码怎么办
  • 2022-04-29关于24小时快速排名SEO优化关键词排名前三的猫腻
  • 2022-04-29详解php中函数的引用传递和返回 (附代码)
  • 2022-04-29了解优化PHP7性能的几个设置
  • 2022-04-29PhotoShop打造腐蚀锈迹钢铁文字特效教程

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • 替换uploadify用Huploadify实现上传图片或文件
    • PHP如何使用Echarts生成数据统计报表
    • 解决ThinkPHP5.1版本引入composer vendor扩展包的问题
    • 柒比贰主题网格风格四缩略图对齐样式代码
    • PHP中静态方法可以访问非静态方法吗
    • PHP+jQuery+MySql实现红蓝投票功能
    • 突破dedecms软件下载地址数30个的限制
    • Photoshop打造超现实燃烧效果
    • vue.js如何实现数字滚动增加效果?代码示例
    • 说说在Laravel中怎么执行Shell命令 ?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有