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

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

<el-table :key='tableKey' :data="detaillist" border fit highlight-current-row
          style="width: 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);
  }
},
Logo

前往低代码交流专区

更多推荐