ElemenetUI之常用小组件

message

不点击调用

this.$message.success(respones.data.msg);

confirm确认框

手动调用 使用回调函数

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'
}).then(() => {console.log('删除用户：', row.id);this.$message({type: 'success',message: '删除成功!'});
}).catch(() => {this.$message({type: 'info',message: '已取消删除'});
});

手动调用 使用await

async del(row) {try {// 1. 弹出确认框，等待用户选择await this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"});// 2. 如果用户点击了"确定"，执行删除操作console.log("开始删除用户：", row.id);// 这里假设 userDelService 是一个返回 Promise 的异步函数，例如使用 axiosconst res = await userDelService(row.id); // 替换为你的删除 API 调用// 3. 删除成功后的反馈this.$message.success(res.msg); // 假设返回数据中有 msg 字段// 重新获取用户列表数据，更新视图await this.getUserList();} catch (error) {// 4. 错误处理（包括用户取消和接口调用失败）if (error === "cancel") {// 用户点击了取消按钮this.$message({type: "info",message: "已取消删除"});} else {// 接口调用或其他错误console.error("删除操作失败:", error);this.$message({type: "error",message:"删除失败: " +(error.response?.data?.msg || error.message || "请稍后重试")});}}
},

点击按钮调用

看官网