vue+element table 上移下移功能实现

最新推荐文章于 2024-12-31 11:18:32 发布

原创最新推荐文章于 2024-12-31 11:18:32 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

本文介绍如何在Vue中使用Element UI的table组件实现列表项的上移和下移功能，通过自定义模板内的按钮触发事件，利用Vue的$set方法确保数据变化实时更新到视图。

上移：

table 里列的 template里按钮

<el-button size="mini" type="text" @click="handleUp(scope.$index, scope.row)">上移</el-button>
<el-button size="mini" type="text" @click="handleDown(scope.$index, scope.row)">下移</el-button>
 
methods: {
        handleUp (index, row) { // 上移
            const len = this.tableData[index - 1]
            this.$set(this.tableData, index - 1, this.tableData[index])
            this.$set(this.tableData, index, len)
        },
        handleDown (index, row) { // 下移
            const len = this.tableData[index + 1]
            this.$set(this.tableData, index + 1, this.tableData[index])
            this.$set(this.tableData, index, len)
        }
    }

使用$set 可更新视图