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

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);
            }
        },

 

Logo

前往低代码交流专区

更多推荐