element table 表格实现上移、下移_el-table上移下移

业务场景：有时候需要前端实现上移和下移功能

代码如下：

根据交互形式，我这里是把第一条数据的上移按钮置灰不可点击：:disabled="scope.$index == 0"；最后一条数据下移按钮置灰不可点击：:disabled="(scope.$index + 1) == tableData.length"。

<template>
    <el-table
        :data="tableData">
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="text" style="padding:0" :disabled="scope.$index == 0" @click="moveUpward(scope.row, scope.$index)">上移</el-button>
                <el-button type="text" style="padding:0" :disabled="(scope.$index + 1) == tableData.length" @click="moveDown(scope.row, scope.$index)">下移</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>
<script>
export default {
    data() {
        tableData: [
            {id: 1, name: '小明001'},
            {id: 2, name: '小红001'},
            {id: 3, name: '小强001'},
            {id: 4, name: '小刚001'},
            {id: 5, name: '小白001'},
            {id: 6, name: '小花001'}
        ]
    },
    methods: {
        moveUpward(row, index) {
            if (index > 0) {
                let upData = this.tableData[index - 1];
                this.tableData.splice(index - 1, 1);
                this.tableData.splice(index, 0, upData);
            } else {
                this.$message({
                    message: '已经是第一条，上移失败',
                    type: 'warning'
                });
            }
        },
        moveDown(row, index) {
            if ((index + 1) == this.tableData.length) {
                this.$message({
                    message: '已经是最后一条，下移失败',
                    type: 'warning'
                });
            } else {
                let downData = this.tableData[index + 1];
                this.tableData.splice(index + 1, 1);
                this.tableData.splice(index, 0, downData);
            }
        }
    }
}
</script>