使用element-plus进行提示替换HTML原生弹窗

This commit is contained in:
chenjinyang
2026-01-15 15:01:05 +08:00
parent 634a1f45f9
commit bea74aeac2

View File

@@ -118,6 +118,7 @@ import {computed, nextTick, onMounted, reactive, ref} from 'vue'
import {addLisGroup, delLisGroup, listLisGroup, updateLisGroup} from '@/api/system/checkType'
import {getDicts} from "@/api/system/dict/data";
import useUserStore from '@/store/modules/user';
import {ElMessage, ElMessageBox} from 'element-plus';
export default {
name: 'LisGroupMaintain',
@@ -303,10 +304,11 @@ export default {
// 显示提示信息
const showMessage = (message, type = 'success') => {
// 在实际项目中,这里可以使用Element Plus或其他UI库的消息组件
// 这里为了简单起见使用浏览器的alert但添加了类型标识
// 使用Element Plus的消息组件
if (type === 'error') {
alert(`错误: ${message}`)
ElMessage.error(message)
} else {
ElMessage.success(message)
}
}
@@ -447,8 +449,6 @@ export default {
// 清除focus-target类避免下次添加行时影响
focusElement.classList.remove('focus-target')
}
showMessage('请填写新记录信息')
}
// 删除行
@@ -460,8 +460,18 @@ export default {
return
}
if (confirm(`确定要删除"${item.lisGroupName}"这条记录吗?`)) {
try {
// 使用Element Plus的确认对话框
await ElMessageBox.confirm(
`确定要删除"${item.lisGroupName}"这条记录吗?`,
'删除确认',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
)
loading.value = true
// 添加删除行标记,触发渐隐效果
@@ -500,16 +510,17 @@ export default {
}
}
} catch (error) {
if (error !== 'cancel') {
showMessage(`删除失败: ${error.message || '未知错误'}`, 'error')
// 如果删除失败,移除删除标记
if (tableData[index]) {
tableData[index].deleting = false
}
}
} finally {
loading.value = false
}
}
}
// 分页方法
const prevPage = () => {