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