前言

当我们在使用 element 表格时，经常会遇到需要对表格中的行进行上移或下移的情况。这个功能的实现还是比较简单的。本文将为大家介绍如何使用 element 表格组件轻松实现行与行之间的上下移动，让你的表格操作更加高效便捷。

实现效果

html

  <div><el-table :data="tableData" border style="width: 100%"><el-table-column prop="redeemNum" label="已兑换"></el-table-column><el-table-column prop="stock" label="兑换库存"></el-table-column><el-table-column prop="createTime" label="创建时间"></el-table-column><el-table-column prop="rank" label="排序"><!-- //上移下移  (scope.$index)点击事件拿到当前下标--><template slot-scope="scope"><div class="upper" @click="handelUpper(scope.$index)"><img src="@/assets/img/上.png" alt /></div><div class="lower" @click="handelDown(scope.$index)"><img src="@/assets/img/下.png" alt /></div></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button type="primary" size="small" @click="handelEdit(scope.row.id)">编辑</el-button><el-button @click="handleDel(scope.row.id)" type="danger" size="small">删除</el-button></template></el-table-column></el-table></div>

data

 data() {return {tableData:[],//表格数据};},

js

 methods: {// 上移handelUpper(index) {// 后台需要的上层以及下层的idconst data = {downId: this.tableData[index].id,//下层idupId: this.tableData[index - 1].id,//上层id};// MoveDown 接口MoveDown(data).then((res) => {console.log(res, "上移");if (res.code == 200) {//  this.IntegralGoodsInfoInfo 调用表格的方法 (this.currentPage, this.pageSize)里面两个参数分别是页码 页数this.IntegralGoodsInfoInfo(this.currentPage, this.pageSize);} else if (res.code == -2001) {this.$message({type: "error",message: res.msg,});}});},// 下移handelDown(index) {// 后台需要的上层以及下层的idconst data = {downId: this.tableData[index + 1].id,//下层idupId: this.tableData[index].id,//上层id};// MoveDown 接口MoveDown(data).then((res) => {console.log(res, "下移");if (res.code == 200) {//  this.IntegralGoodsInfoInfo调用表格的方法 (this.currentPage, this.pageSize) 里面两个参数分别是页码 页数this.IntegralGoodsInfoInfo(this.currentPage, this.pageSize);} else if (res.code == -2001) {this.$message({type: "error",message: res.msg,});}});},},

拓展

可能有些同学觉得点击事件的方式太麻烦了，可不可以通过鼠标拖动的方式去改变呢？答案是可以的，具体操作请参考博主另一篇文章（vue基于SortableJS实现表格拖动排序）

教你一招，element表格行轻松上下移动相关推荐

山西计算机等级考试科目一模拟试题,考驾照科目一试题100题，老司机教你两招，让你轻松考过！...
原标题:考驾照科目一试题100题,老司机教你两招,让你轻松考过! 很多学员都在问考驾照科目一试题100题,那么小编就分享一下考驾照科目一试题100题吧,这些考驾照科目一试题100题,考驾照的你值得拥有 ...
【物联网】老程序教你一招，10行代码让超声波模块秒变声控开关
目录 1. 超声波模块的测距原理 2. 超声波模块如何与Arduino开发板连接 3. 先从测距开始 4. 如何将超声波改造成声控开关 5. 再加一个超声波开关在本文最后有完整的视频讲解玩Ardu ...
Excel快速打印底端标题，教你一招，肯定行！
今天跟大家分享一个关于Excel如何快速打印底端标题的技巧,需要的赶紧学起来! 方法步骤: 首先我们在工作表中输入底部要显示的标题文字,然后使用截图工具把这部分文字截图保存为图片,接下来将工作表中的底 ...
线上Bug无法复现怎么办？老司机教你一招，SpringBoot远程调试不用愁！
前言在部署线上项目时,相信大家都会遇到一个问题,线上的 Bug 但是在本地不会复现,多么无奈. 此时最常用的就是取到前端传递的数据用接口测试工具测试,比如 POSTMAN,复杂不,难受不? 今天陈某 ...
springboot设置默认值_线上Bug无法复现？老司机教你一招，SpringBoot远程调试不用愁！...
前言在部署线上项目时,相信大家都会遇到一个问题,线上的 Bug 但是在本地不会复现,多么无奈. 此时最常用的就是取到前端传递的数据用接口测试工具测试,比如 POSTMAN,复杂不,难受不? 今天陈某 ...
如何批量修改文件名？教你一招，轻松解决
目录办公小技巧:批量修改文件名 1.批量获取文件夹中的文件名 1.1 在需要提取文件名的文件夹内新建一个.txt文件,用记事本打开输入: 1.2 修改该.txt文件的后缀名为.bat 1.3 双击. ...
Element表格之表头合并、行合并和列合并
文章目录一.合并表头二.合并表格行三.合并表格列最近写vue开发项目的时候,很多地方用到了Element组件中的Table 表格.经过一周的边学边做,我总结了以下三种有关表格的合并方法. 一. ...
安卓手机突然很卡_你的安卓手机越来越卡？教你4招轻松解决问题！
原标题:你的安卓手机越来越卡?教你4招轻松解决问题! 现在我们对于手机的使用时间不会特别的长,所以这个更换的速度就比较快.其实是很多的用户换手机是因为比较喜欢用新的手机体验新的科技,不过也还是有很多的 ...
sd卡测速工具_怎样恢复SD卡数据？教你两招轻松恢复
怎样恢复SD卡数据?教你两招轻松恢复 SD卡数据恢复软件里真正免费的而且具备比较高的恢复能力的软件其实不多,而嗨格式数据恢复大师就是其中之一,SD 内存卡是一种性价比相对较高的存储设备,在目前的生活中 ...

教你一招，element表格行轻松上下移动

前言

实现效果

拓展

教你一招，element表格行轻松上下移动相关推荐

最新文章

热门文章