Is there any way to add ui-element, ElMessageBox confirm button click event?

Question

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
            >&nbsp;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

Answer 1

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',
  })
})
}