When I try to remove data from the table, I need a warning message to appear in the center of the screen first. The delete function is already set up, but I'm struggling to figure out how to implement a confirm button click event with ElMessageBox. I want the deletion process to only proceed if "Yes" is clicked on the confirm dialog. Any suggestions or assistance would be greatly appreciated. Thank you!
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);
}
}
};