有没有办法添加ui-element、ElMessageBox确认按钮点击事件？

发布于 2025-01-15 22:29:28 字数 1212 浏览 2 评论 0原文

当我从表中删除数据时，我希望它首先在屏幕中间弹出一个警告。删除功能已准备就绪，我只想添加确认按钮单击事件（删除功能）当我弹出ElMessageBox时。当我按yes时，删除应该完成。但我找不到方法来做到这一点。有什么帮助吗？提前致谢！

这是我的 html 代码

              <el-button class="menu-link px-3" type="text" @click="open">
            <span class="svg-icon svg-icon-3">
              <inline-svg src="media/icons/duotune/art/art005.svg" /> </span
            >&nbsp;Delete
          </el-button>

这是我的脚本代码

   const open = () => {
    ElMessageBox.confirm(
'Do you want to continue the deletion?',  
{
  confirmButtonText: 'Yes',
  cancelButtonText: 'No',
  type: 'warning',
  center: true,     
})
.then(() => {
  ElMessage({
    type: 'success',
    message: 'Deletion completed',
  })
})
.catch(() => {
  ElMessage({
    type: 'info',
    message: 'Deletion canceled',
  })
})
}

这是我的删除函数

    const deleteCustomer = (id) => {
  for (let i = 0; i < tableData.value.length; i++) {
    if (tableData.value[i].id === id) {
      tableData.value.splice(i, 1);
    }
  }
};

您可以单击查看屏幕截图输出

原文

When I delete a data from the table, I want it to pop up a warning in the middle of the screen first.Delete function is ready,i just want to add confirm button click event(delete function) when i pop up ElMessageBox.When I press yes, the deletion should be done.But i couldn't find a way to do it.Any helps? Thanks in advance!

Here is my html code

              <el-button class="menu-link px-3" type="text" @click="open">
            <span class="svg-icon svg-icon-3">
              <inline-svg src="media/icons/duotune/art/art005.svg" /> </span
            > Delete
          </el-button>

Here is my script code

   const open = () => {
    ElMessageBox.confirm(
'Do you want to continue the deletion?',  
{
  confirmButtonText: 'Yes',
  cancelButtonText: 'No',
  type: 'warning',
  center: true,     
})
.then(() => {
  ElMessage({
    type: 'success',
    message: 'Deletion completed',
  })
})
.catch(() => {
  ElMessage({
    type: 'info',
    message: 'Deletion canceled',
  })
})
}

Here is my Delete function

    const deleteCustomer = (id) => {
  for (let i = 0; i < tableData.value.length; i++) {
    if (tableData.value[i].id === id) {
      tableData.value.splice(i, 1);
    }
  }
};

You can click to see the screen shot outputs

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

入怼 2025-01-22 22:29:28

当您单击 yes 时，open 函数的 .then() 部分将被执行。在该块中，您需要调用删除函数。

您还需要将 id 传递给 open() 函数。就像open(id)。

this.deleteCustomer(id) 或只是 deleteCustomer(id)。

const open = (id) => { // pass the id
    ElMessageBox.confirm(
'Do you want to continue the deletion?',  
{
  confirmButtonText: 'Yes',
  cancelButtonText: 'No',
  type: 'warning',
  center: true,     
})
.then(() => {
  // here you can call the delete function. 
  // this is the part that is executed when you click yes
  this.deleteCustomer(id) // use the id
  ElMessage({
    type: 'success',
    message: 'Deletion completed',
  })
})
.catch(() => {
  ElMessage({
    type: 'info',
    message: 'Deletion canceled',
  })
})
}

When you click yes the .then() part of open function gets executed. In that block you need to call the delete function.

You need to pass id to open() function as well. Like open(id).

this.deleteCustomer(id) or just deleteCustomer(id).

const open = (id) => { // pass the id
    ElMessageBox.confirm(
'Do you want to continue the deletion?',  
{
  confirmButtonText: 'Yes',
  cancelButtonText: 'No',
  type: 'warning',
  center: true,     
})
.then(() => {
  // here you can call the delete function. 
  // this is the part that is executed when you click yes
  this.deleteCustomer(id) // use the id
  ElMessage({
    type: 'success',
    message: 'Deletion completed',
  })
})
.catch(() => {
  ElMessage({
    type: 'info',
    message: 'Deletion canceled',
  })
})
}

回复收藏 0 原文

~没有更多了~