el-table 控制cell的上下移动

最新推荐文章于 2024-11-12 10:29:53 发布

原创最新推荐文章于 2024-11-12 10:29:53 发布 · 1.2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #vue.js

收录于

JS 专栏收录该内容

3 篇文章

订阅专栏

这篇博客记录了如何在表格中实现单元格的上下移动功能。通过提供的`moveUp`和`moveDown`函数，实现了当点击按钮时，单元格能够在表格中上移或下移。如果单元格处于首行则无法上移，处于末行则无法下移，提供了友好的用户提示。

近期在项目中遇到了要将表格cell进行上下移动的需求，于是乎来记录一下功能的实现过程

具体的需求效果是在表格的cell上通过两个按钮来实现表格的上下移动，具体代码如下

上移动：

moveUp(index, row) {
  const that = this
  // console.log('上移', index, row)
  if (index > 0) {
      const upDate = that.tableData[index - 1]
      that.tableData.splice(index - 1, 1)
      that.tableData.splice(index, 0, upDate)
  } else {
      alert('已经是第一条，不可上移')
  }
 }

下移动
moveDown(index, row) {
 const that = this
 // console.log('下移', index, row)
 if (index + 1 === that.tableData.length) {
    alert('已经是最后一条，不可下移')
 } else {
    const downDate = that.tableData[index + 1]
    that.tableData.splice(index + 1, 1)
    that.tableData.splice(index, 0, downDate)
 }
}