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

 

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

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

代码：

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


    <el-table-column width="180">
        <template slot-scope="scope">
            <el-button
             title="上移"
             @click="moveup(scope.$index)"
             icon="icon-arrow_up">
             </el-button>
             <el-button
             title="下移"
             @click="movedown(scope.$index)"
             icon="icon-arrow_down">
            </el-button>
        </template>
     </el-table-column>

 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]))
 },