前端js实现表格数据的上移下移

 

vue项目需求中需要前端实现表格行数据的上移下移，效果如下

实现思路：主要使用前端对数组的操作方法splice()

代码：

    tableData: [{
        name: '1',
        id: '1'
      }, {
        name: '2',
        id: '2'
      }, {
        name: '3',
        id: '3'
      }, {
        name: '4',
        id: '4'
      }, {
        name: '5',
        id: '5'
    }]


    
        
     

 moveup (val) {
      let x = val; let y = val + 1
      this.tableData.splice(x - 1, 1, ...this.tableData.splice(y - 1, 1, this.tableData[x - 1]))
 },
 movedown (val) {
      let x = val + 1; let y = val + 2
      this.tableData.splice(x - 1, 1, ...this.tableData.splice(y - 1, 1, this.tableData[x - 1]))
 },