电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

基于js實(shí)現(xiàn)數(shù)組相鄰元素上移下移

瀏覽:120日期:2024-05-08 13:45:47

實(shí)現(xiàn)效果:

基于js實(shí)現(xiàn)數(shù)組相鄰元素上移下移

即需要實(shí)現(xiàn)當(dāng)前元素與相鄰元素交換位置,

當(dāng)上移時(shí),則是當(dāng)前元素與上一元素調(diào)換位置;當(dāng)下移時(shí),則是當(dāng)前元素與下一元素調(diào)換位置。

實(shí)現(xiàn)代碼:

js:

//點(diǎn)擊上移clickUp(index){ this.swapArray(this.tableData, index-1, index);},//點(diǎn)擊下移clickDown(index){ this.swapArray(this.tableData, index, index+1);},//數(shù)組元素互換位置swapArray(arr, index1, index2) { arr[index1] = arr.splice(index2, 1, arr[index1])[0]; return arr;},

html:

<el-table-column label='順序調(diào)整' min- align='center'> <template slot-scope='scope'> <div class='img_style'> <img src='http://www.hdgsjgj.cn/bcjs/@/assets/images/up_01.png' v-if='scope.$index == 0'> <img src='http://www.hdgsjgj.cn/bcjs/@/assets/images/up.png' @click='clickUp(scope.$index)' v-else> <img src='http://www.hdgsjgj.cn/bcjs/@/assets/images/down_01.png' v-if='scope.$index == tableData.length - 1'> <img src='http://www.hdgsjgj.cn/bcjs/@/assets/images/down.png' @click='clickDown(scope.$index)' v-else> </div> </template></el-table-column>

注意:

1.思想就是在數(shù)組中交換兩個(gè)元素的位置,使用splice()的替換;

2.上移是跟上一元素交換位置,下移是跟下一元素交換位置,不同體現(xiàn)在調(diào)用調(diào)換方法時(shí)傳入的index參數(shù)不同。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 长江船运_国内海运_内贸船运_大件海运|运输_船舶运输价格_钢材船运_内河运输_风电甲板船_游艇运输_航运货代电话_上海交航船运 | 瓶盖扭矩测试仪-瓶盖扭力仪-全自动扭矩仪-济南三泉中石单品站 | 奇酷教育-Python培训|UI培训|WEB大前端培训|Unity3D培训|HTML5培训|人工智能培训|JAVA开发的教育品牌 | 等离子空气净化器_医用空气消毒机_空气净化消毒机_中央家用新风系统厂家_利安达官网 | 全国国际化学校_国际高中招生_一站式升学择校服务-国际学校网 | 单锥双螺旋混合机_双螺旋锥形混合机-无锡新洋设备科技有限公司 | 公交驾校-北京公交驾校欢迎您! 工作心得_读书心得_学习心得_找心得体会范文就上学道文库 | 土壤肥料养分速测仪_测土配方施肥仪_土壤养分检测仪-杭州鸣辉科技有限公司 | 泰国专线_泰国物流专线_广州到泰国物流公司-泰廊曼国际 | DDoS安全防护官网-领先的DDoS安全防护服务商 | 北京银联移动POS机办理_收银POS机_智能pos机_刷卡机_收银系统_个人POS机-谷骐科技【官网】 | 真丝围巾|真丝丝巾|羊绒围巾|围巾品牌|浙江越缇围巾厂家定制 | 风信子发稿-专注为企业提供全球新闻稿发布服务 | 电子书导航网_电子书之家_电子书大全_最新电子书分享发布平台 | 杭州厂房降温,车间降温设备,车间通风降温,厂房降温方案,杭州嘉友实业爽风品牌 | Trimos测长机_测高仪_TESA_mahr,WYLER水平仪,PWB对刀仪-德瑞华测量技术(苏州)有限公司 | 湖南档案密集架,智能,物证,移动,价格-湖南档案密集架厂家 | 篷房[仓储-婚庆-展览-活动]生产厂家-江苏正德装配式帐篷有限公司 | ISO9001认证咨询_iso9001企业认证代理机构_14001|18001|16949|50430认证-艾世欧认证网 | 江西自考网| 脉冲布袋除尘器_除尘布袋-泊头市净化除尘设备生产厂家 | 低气压试验箱_高低温低气压试验箱_低气压实验箱 |林频试验设备品牌 | 洛阳网站建设_洛阳网站优化_网站建设平台_洛阳香河网络科技有限公司 | 钛合金标准件-钛合金螺丝-钛管件-钛合金棒-钛合金板-钛合金锻件-宝鸡远航钛业有限公司 | 数显水浴恒温振荡器-分液漏斗萃取振荡器-常州市凯航仪器有限公司 | 建大仁科-温湿度变送器|温湿度传感器|温湿度记录仪_厂家_价格-山东仁科 | ★店家乐|服装销售管理软件|服装店收银系统|内衣店鞋店进销存软件|连锁店管理软件|收银软件手机版|会员管理系统-手机版,云版,App | 板材品牌-中国胶合板行业十大品牌-环保板材-上海声达板材 | 云杂志网-学术期刊-首页 | 锂电混合机-新能源混合机-正极材料混料机-高镍,三元材料混料机-负极,包覆混合机-贝尔专业混合混料搅拌机械系统设备厂家 | 长沙一级消防工程公司_智能化弱电_机电安装_亮化工程专业施工承包_湖南公共安全工程有限公司 | 螺旋压榨机-刮泥机-潜水搅拌机-电动泥斗-潜水推流器-南京格林兰环保设备有限公司 | 河南卓美创业科技有限公司-河南卓美防雷公司-防雷接地-防雷工程-重庆避雷针-避雷器-防雷检测-避雷带-避雷针-避雷塔、机房防雷、古建筑防雷等-山西防雷公司 | 合肥注册公司|合肥代办营业执照、2024注册公司流程 | 欧景装饰设计工程有限公司-无锡欧景装饰官网 | 污泥烘干机-低温干化机-工业污泥烘干设备厂家-焦作市真节能环保设备科技有限公司 | 温州食堂承包 - 温州市尚膳餐饮管理有限公司 | 西安文都考研官网_西安考研辅导班_考研培训机构_西安在职考研培训 | U拓留学雅思一站式服务中心_留学申请_雅思托福培训 | 带式压滤机_污泥压滤机_污泥脱水机_带式过滤机_带式压滤机厂家-河南恒磊环保设备有限公司 | 硬齿面减速机_厂家-山东安吉富传动设备股份有限公司 |