Vue2，vue3 用element ui 做el-table表格行的上移和下移

前端渣渣高

已于 2023-06-19 17:27:04 修改

阅读量1.9k

点赞数 3

文章标签： vue.js elementui 前端

于 2023-03-07 15:59:52 首次发布

本文链接：https://blog.csdn.net/weixin_48211022/article/details/129383872

版权

项目场景：用Vue2做el-table表格行的上移和下移

提示：这里简述项目相关背景：后台管理系统常用
在这里插入图片描述点击上移或下移按钮对当前行进关联操作，如果是表格第一行则不能上移，如果是表格的最后一行，则不能进行下移，不名思意就是禁用~

问题描述

提示：这里描述项目中遇到的问题：当前需要获取到表格的index,可以通过:row-class-name="tableRowClassName"这个方法


---

# 原因分析：
> 上移禁用功能可以根据row.index ===0 来判断，下移禁用根据row.index === tableDate.length - 1 来判断

---

# 解决方案：
>提示：这里填写该问题的具体解决方案：
关键性代码：
   //  上移功能
	moveUp(index) {
      const currentRow = this.tableData.splice(index, 1)[0]
      this.tableData.splice(index - 1, 0, currentRow)
    }
  //  下移功能
  moveDown(index) {
      const currentRow = this.tableData.splice(index, 1)[0]
      this.tableData.splice(index + 1, 0, currentRow)
   }