首页 > 教程 >
JS如何实现数组数据的上移下移
2023-02-15教程围观次
简介Vue项目开发中碰到对表格数据实现上移,下移的需求,只是纯前端实现移动数组数据,不跟服务端做交互。经研究,用splice方法简洁优雅,具体实现如下://上移,下移onMove(code,dir){letmoveComm=(curIndex,nextIndex)=>{letarr=this.stack.selAwardListarr[curIndex]=arr.splice(nextIndex,1,
Vue项目开发中碰到对表格数据实现上移,下移的需求,只是纯前端实现移动 数组数据,不跟服务端做交互。
经研究,用splice方法简洁优雅,具体实现如下:
// 上移,下移 (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、 ()方法的传参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个索引的赋值。
大家有其他更优雅的实现方法欢迎提出。
下载链接:网站源码/小程序源码/网站模板下载
下载排行
- 多套头像/壁纸/背景图资源微信小程序源码 粉色UI 带流量主
- PHP在线考试系统4.0版本源码电脑+手机端
- 全新UI简洁H5商城网站源码/带易支付接口
- 壁纸头像/动态壁纸小程序源码-支持用户投稿-带部分采集功能+视频搭建教程
- 某鱼最近卖的很火蓝色版微信去水印小程序源码+接口
- 简约自适应wordpress博客二次元主题qzdy4.3
- EyouCMS响应式苗木园林绿化公司模板/易优CMS农业林业类企业网站模板
- 小旋风万能蜘蛛池x9.02开心版/站长必备SEO/永久使用/带教程
- 最新PHP短网址生成系统/短链接生成系统/URL缩短器系统源码
- 群多多社群人脉H5-2.1.4多开插件+小程序独立前端+搭建教程