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

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

可以通过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)
            })
        },

猜你喜欢

转载自blog.csdn.net/Andye11/article/details/129057400