element table 表格实现上移、下移

最新推荐文章于 2025-06-22 08:35:52 发布

Wudq0601

最新推荐文章于 2025-06-22 08:35:52 发布

阅读量4.9k

点赞数 9

CC 4.0 BY-SA版权

分类专栏： element-ui

本文链接：https://blog.youkuaiyun.com/qq_38468358/article/details/103549222

element-ui 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在前端使用Element UI的表格组件实现数据项的上移和下移功能，通过禁用按钮确保边界数据不会发生错误移动，并提供完整的Vue代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

代码如下：

根据交互形式，我这里是把第一条数据的上移按钮置灰不可点击：: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>