element - 如何通过js调用el-confirm组件？

最新推荐文章于 2025-04-19 09:32:13 发布

Dark_programmer

最新推荐文章于 2025-04-19 09:32:13 发布

阅读量1.4k

点赞数

分类专栏： elementUI 文章标签： elementui

本文链接：https://blog.youkuaiyun.com/Dark_programmer/article/details/126784130

版权

elementUI 专栏收录该内容

19 篇文章

订阅专栏

本文探讨如何在Vue应用中利用element-ui的$confirm组件，为遍历接口返回数组中的特定按钮添加确认弹窗功能。通过示例代码btnsCallback()展示了如何在点击删除按钮时弹出警告对话框，确保用户确认操作。点击确定和取消按钮分别触发不同的回调处理。

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

1. 场景描述

关于el-confirm，意在防止误点击的操作。

官方用法如下：
在这里插入图片描述

这种用法肯定不能满足所有的需求，如下需求即不能满足。

按钮是遍历接口返回的数组，在点击特定按钮时需要弹出确认弹窗

那么该如何实现这个需求呢？

2.实现方案：

btnsCallback(){
  this.$confirm("是否确认要删除该数据吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(res => {
      // 点击了确定按钮
    })
    .catch(err => {
      //点击了取消按钮
    });
}