【elementUI】elementUI表格删除最后一条数据，使用scoped.$index为判断条件

小安驾到

已于 2023-02-16 11:30:13 修改

阅读量779

点赞数

分类专栏： elementUI小技巧文章标签：前端 elementui

于 2023-02-16 11:27:00 首次发布

本文链接：https://blog.youkuaiyun.com/Andye11/article/details/129057400

版权

elementUI小技巧专栏收录该内容

2 篇文章

订阅专栏

在Vue.js应用中，当从表格中删除最后一条数据时，实现页面回退到上一页。通过使用`scoped.$index`来判断当前删除的是不是最后一条，如果`scoped.$index`等于0，表示删除了最后一条，从而更新分页并请求上一页数据。

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

表格删除最后一条数据后，应该跳转到上一页，难点主要在于如何判断该条数据是最后一条数据？

可以通过scoped.$index属性轻松判断，该属性用于记录选中的那行表格数据在这一页数据中的下标。

代码如下：

html部分：使用v-slot来获取该行记录的数据
<el-table-column label="操作">
      <template v-slot="scoped">
          <el-button type="text" size="small" @click="delete(scoped)">删除</el-button>
      </template>
</el-table-column>

// 删除数据操作
        async delete(scoped) {
            // console.log(scoped) 利用eleUI自带的scoped变量接收数据
            this.$confirm(`确认删除 "${scoped.row.name}" 这条数据吗？`).then(async () => {
                await del(scoped.row.id) //发送删除的axios请求
                // 如果删除的是最后一条数据 则应该请求上一页数据并更新页面
                if (scoped.$index == 0) {
                    this.page.page--
                }
                this.getList() //请求数据列表 更新视图
                Message.success(`删除 "${data.row.name}" 成功`)
            }, (reason) => {
                console.log(reason)
            })
        },