基于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 相关文章推荐
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
innerText 使用示例
Jan 23 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 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牛逼的面试题分享
2013/01/18 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
深入理解Vue 的钩子函数
2018/09/05 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
大四自我鉴定
2014/02/08 职场文书
人事科岗位职责范本
2014/03/02 职场文书
承诺书的格式范文
2014/03/28 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
民政工作个人总结
2015/02/28 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库