表格删除最后一条数据后,应该跳转到上一页,难点主要在于如何判断该条数据是最后一条数据?
可以通过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)
})
},