vue el-table实现行上移下移

<el-table :data="data">
   <el-table-column>
      <template slot-scope="scope">
          <button @click="moveUp(scope.$index)"><i class="el-icon-top"></i></button>
          <button @click="moveDown(scope.$index)"><i class="el-icon-bottom"></i></button>      
      </template>
   </el-table-column>

</el-table>

data(){}
  return{
    data:[]  //元数据
  }

methods:{
 // 上移
    moveUp(index) {
      if (index > 0) {
        const upDate = this.data[index - 1];
        this.data.splice(index - 1, 1);
        this.data.splice(index, 0, upDate);
      } else {
        alert("已经是第一条，不可上移");
      }
    },
}
  // 下移
    moveDown(index) {
      if (index + 1 === this.data.length) {
        alert("已经是最后一条，不可下移");
      } else {
        const downDate = this.data[index + 1];
        this.data.splice(index + 1, 1);
        this.data.splice(index, 0, downDate);
      }
    },

最后就这样子的