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

表格操作：Vue表格组件的增删按钮实现

最新推荐文章于 2024-05-15 16:36:20 发布

原创最新推荐文章于 2024-05-15 16:36:20 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

链接

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>

methods

//向上移动
        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);
            }
        },