博客

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

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

html:

<el-table-column label="操作" min-width=" 100%">
    <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===(imageData.length-1)"
                @click="moveDown(scope.$index,scope.row)"><i class="el-icon-arrow-down"></i></el-button>
        <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)">删除</el-button>
    </template>
</el-table-column>

通过 index  判断这行是第一行（0）  判断最后一行  可以通过index 与数据源的长度判断，代码中加下划线的地方。

js部分：数据源可以通过ajax后台获取，

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

可以实现上下移动