有没有办法添加ui元素，ElMessageBox确认按钮点击事件?

Question

当我从表中删除数据时，我希望它首先在屏幕中间弹出警告。删除功能已准备就绪，我只想在弹出ElMessageBox时添加确认按钮单击事件(删除功能)。但是我找不到办法。有什么帮助吗？提前感谢！

这是我的 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()部分。在该块中，您需要调用删除函数。

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