el-table 控制cell的上下移动

欧阳学真
2023-12-01

近期在项目中遇到了要将表格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)
 }
}

 类似资料: