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

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

作者:站长图库 字体:[增加 减小] 来源:互联网

站长图库向大家介绍了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如何实现数组数据的上移下移

相关文章

  • 浅析小程序中怎么让scroll-view按照指定位置滚动
  • Angular如何对请求进行拦截封装?
  • 浅谈如何在制作dedecms模板中进行一些SEO设置
  • PHP生成缩略图实例讲解
  • Laravel $kernel->handle 报错的解决办法
  • illustrator制做透明气泡
  • ThinkPHP中if标签和比较标签对于变量的比较
  • VUE动态添加的路由页面刷新时失效的原因及解决方案
  • Photoshop制作绚丽的霓虹艺术字教程
  • Photoshop绘制金属质感的指南针

文章分类

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

最近更新的内容

    • 在微信小程序中用户登录和登录状态维护
    • css中&表示什么意思
    • Photoshop绘制超强质感立体按钮
    • PHP解密支付宝小程序的加密数据、手机号的示例代码
    • CSS如何实现渐变提示框(tooltips)
    • 解决Laravel 8 undefined variable错误问题
    • 如何实现由抖音、快手、知乎、短信等外部APP或浏览器跳转到微信?
    • 做好网站站内链接分配 提高网站百度指日可待
    • PHP怎么将整数转为浮点数类型
    • JavaScript事件之事件冒泡与时间捕获(总结分享)

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

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