1.实现思路前端把用户Id用axios请求发送给后端,后端获取id,把用户数据删除并返回给前端一个删除成功响应
2.编写axios请求代码
const deleteEmployee = async (empNo) => {try {const response = await axios.delete(`http://localhost:8080/api/delEmp`, {params: {empNo: empNo}});console.log('Employee deleted successfully:', response.data.message);ElMessage({message: response.data.message,type: response.data.success ? 'success' : 'error'});// 刷新表格数据fetchData();} catch (error) {console.error('Error deleting employee:', error);ElMessage({message: '删除员工时出错',type: 'error'});} };
3.获取用户输入员工Id
<el-table-column fixed="right" label="操作" width="180"><template #default="scope"><el-button size="small" type="danger" @click="deleteEmployee(scope.row.empNo)">删除</el-button></template></el-table-column>
@click="deleteEmployee(scope.row.empNo)"
:
绑定了点击事件处理器。当用户点击此按钮时,会调用名为
deleteEmployee
的方法,并将当前行的empNo
(员工编号)作为参数传递给它。
4.最后前端把用户的员工传给后端删除即可
-
前端根据后端返回的数据判断,数据是否删除成功,并给用户提示
5.ElMessage的使用
<template> <button @click="showMessage">显示消息</button> </template> <script> import { ElMessage } from 'element-plus'; export default { methods: { showMessage() { //使用ElMessage({ message: '这是一条消息', type: 'success', }); }, }, }; </script>
在上面的代码中,当用户点击按钮时,showMessage 方法会被调用,然后 ElMessage 会显示一个成功的消息提示。请注意,ElMessage 接受的参数是一个对象,你可以根据需要配置不同的属性,比如 message(消息内容)、type(消息类型,如 ‘success’、‘warning’、‘info’、‘error’ 等)、duration(显示时间)等。具体可配置的属性请参考 Element Plus 的官方文档。