基于js实现数组相邻元素上移下移


Posted in Javascript onMay 19, 2020

实现效果:

基于js实现数组相邻元素上移下移

即需要实现当前元素与相邻元素交换位置,

当上移时,则是当前元素与上一元素调换位置;当下移时,则是当前元素与下一元素调换位置。

实现代码:

js:

//点击上移
clickUp(index){
 this.swapArray(this.tableData, index-1, index);
},
//点击下移
clickDown(index){
 this.swapArray(this.tableData, index, index+1);
},
//数组元素互换位置
swapArray(arr, index1, index2) {
 arr[index1] = arr.splice(index2, 1, arr[index1])[0];
 return arr;
},

html:

<el-table-column label="顺序调整" min-width="80" align="center">
 <template slot-scope="scope">
  <div class="img_style">
   <img src="@/assets/images/up_01.png" v-if="scope.$index == 0">
   <img src="@/assets/images/up.png" @click="clickUp(scope.$index)" v-else>
   <img src="@/assets/images/down_01.png" v-if="scope.$index == tableData.length - 1">
   <img src="@/assets/images/down.png" @click="clickDown(scope.$index)" v-else>
  </div>
 </template>
</el-table-column>

注意:

1.思想就是在数组中交换两个元素的位置,使用splice()的替换;

2.上移是跟上一元素交换位置,下移是跟下一元素交换位置,不同体现在调用调换方法时传入的index参数不同。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 Javascript
Node.js API详解之 zlib模块用法分析
May 19 #Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 #Javascript
JavaScript实现简单的弹窗效果
May 19 #Javascript
js实现自定义右键菜单
May 18 #Javascript
微信小程序手动添加收货地址省市区联动
May 18 #Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 #Javascript
django简单的前后端分离的数据传输实例 axios
May 18 #Javascript
You might like
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
第四章 php数学运算
2011/12/30 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
2016/05/24 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
深入理解Python3中的http.client模块
2017/03/29 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
对Python中plt的画图函数详解
2018/11/07 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
python3实现表白神器
2019/04/09 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
python异步Web框架sanic的实现
2020/04/27 Python
Django如何实现防止XSS攻击
2020/10/13 Python
IBatis持久层技术
2016/07/18 面试题
大学生个人推荐信范文
2013/11/25 职场文书
集体婚礼证婚词
2014/01/13 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
陈欧的广告词
2014/03/18 职场文书
优秀教师事迹材料
2014/12/15 职场文书
iPhone13将有八大升级
2021/04/15 数码科技