vue添加删除按钮及实现删除时弹框提示

最新推荐文章于 2025-05-15 17:16:07 发布

0Cº

最新推荐文章于 2025-05-15 17:16:07 发布

阅读量2.5k

点赞数 1

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_43196880/article/details/119396900

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了如何在Vue项目中为表格添加删除功能，并在用户执行删除操作时显示确认提示对话框。通过`el-button`组件结合`$confirm`或`el-popconfirm`实现交互，确保用户在删除前进行确认。示例代码展示了`handleDeleteRow`方法和`openDelConfirm`函数的实现，以及删除操作成功后的反馈。

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

添加删除按钮

<el-button type=“text” @click=“handleDeleteRow(scope.row)”>删除
1
openDelConfirm(name) {
return this.$confirm(此操作将删除 ${name}, 是否继续?, ‘提示’, {
confirmButtonText: ‘确定’,
cancelButtonText: ‘取消’,
type: ‘warning’
})
},

handleDeleteRow(row) {
this.openDelConfirm(row.roleName).then(() => {
deleteOne(row.id).then(res => {
this.$message({
type: ‘success’,
message: ‘删除成功!’
})
this.fetchTableData()
})
}).catch(() => {
})
},

另一种实现删除时弹框提示

<el-popconfirm title=“确认删除吗？删除后不可恢复” @onConfirm=“del([row.id])”>
删除