Cuando elimino un dato de la tabla, primero quiero que aparezca una advertencia en el medio de la pantalla. La función de eliminación está lista, solo quiero agregar un evento de clic en el botón de confirmación (función de eliminación) cuando aparezca ElMessageBox. Presiono sí, la eliminación debe realizarse. Pero no pude encontrar una manera de hacerlo. ¿Alguna ayuda? ¡Gracias por adelantado!
Aquí está mi código 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 > Delete </el-button>Aquí está mi código de secuencia de comandos
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', }) }) }Aquí está mi función Eliminar
const deleteCustomer = (id) => { for (let i = 0; i < tableData.value.length; i++) { if (tableData.value[i].id === id) { tableData.value.splice(i, 1); } } };Puede hacer clic para ver las salidas de captura de pantalla
Cuando hace clic en sí, se ejecuta la parte .then() de la función abierta. En ese bloque, debe llamar a la función de eliminación.
También debe pasar id a la función open() . Como open(id) .
this.deleteCustomer(id) o simplemente 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', }) }) }