Vue中table实现行的上移和下移

最上方的行不可以再向上移动：所以向上的按钮禁用，同理最下面的一行也是

html代码：

<el-table-column label="操作" align="center" width="250px" fixed="right">
                                <template slot-scope="scope">
                                   
                                    <el-button class="operatBtn" size="mini" icon="el-icon-bottom"
                                               :disabled="scope.$index===(tableData.length-1)"
                                               @click="moveDown(scope.$index,scope.row)">
                                    </el-button>
                                    <el-button class="operatBtn" size="mini" icon="el-icon-top"
                                               :disabled="scope.$index===0"
                                               @click="moveUp(scope.$index,scope.row)">
                                    </el-button>
                                   
                                </template>
                            </el-table-column>

主要代码：

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