vue+elemenUI实现el-table-column行的上下移动

最后实现的效果，如图所示，第一行的向上按钮不可操作，最后一行的向下按钮为不可操作。

其实 vue的很多操作并不是对页面数据的操作，而是对数据源的操作，数据源发生变化，实时渲染页面，这样就达到了，我们的需求。上代码：

<el-table :key='tableKey' :data="detaillist" border fit highlight-current-row
          style=" 100%">
  <el-table-column align="center" label="序号" width="65">
    <template slot-scope="scope">
      <span>{{ scope.$index + 1 }}</span>
    </template>
  </el-table-column>
  <el-table-column align="center" label="股道(号码)" width="145">
    <template slot-scope="scope">
      <span>{{scope.row.bztzdGdhm}}</span>
    </template>
  </el-table-column>
  <el-table-column align="center" label="操作">
    <template slot-scope="scope">
      <el-button
        size="mini"
        :disabled="scope.$index===0"
        @click="moveUp(scope.$index,scope.row)"><i class="el-icon-arrow-up"></i></el-button>
      <el-button
        size="mini"
        :disabled="scope.$index===(detaillist.length-1)"
        @click="moveDown(scope.$index,scope.row)"><i class="el-icon-arrow-down"></i></el-button>
      <el-button size="small" type="danger" @click="rowchilddel(scope.$index)">
        删除
      </el-button>
    </template>
  </el-table-column>
</el-table>

这是数据的list----------> detaillist: [],

//向上移动
moveUp(index, row) {
  var that = this;
  console.log('上移', index, row);
  console.log(that.detaillist[index]);
  if (index > 0) {
    let upDate = that.detaillist[index - 1];
    that.detaillist.splice(index - 1, 1);
    that.detaillist.splice(index, 0, upDate);
  } else {
    alert('已经是第一条，不可上移');
  }
},
//向下移动
moveDown(index, row) {
  var that = this;
  console.log('下移', index, row);
  if ((index + 1) === that.detaillist.length) {
    alert('已经是最后一条，不可下移');
  } else {
    console.log(index);
    let downDate = that.detaillist[index + 1];
    that.detaillist.splice(index + 1, 1);
    that.detaillist.splice(index, 0, downDate);
  }
},