是否有任何方法添加ui元素，ElMessageBox确认按钮单击事件？

Question

当我从表中删除a数据时，我希望它在屏幕中间弹出一个警告，first.Delete函数已经准备好了，我只想添加确认按钮单击事件(删除函数)当我弹出ElMessageBox.When时，我按下“是”，删除应该是done.But提前感谢！

这是我的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);
    }
  }
};

您可以单击以查看屏幕快照输出。

Answer 1

当您单击“是”时，将执行open函数的.then()部分。在这个块中，您需要调用delete函数。

您还需要将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',
  })
})
}

​