1.首先先定义两个按钮(一个添加按钮，一个修改按钮)
<el-button type="primary" @click="openDialog(true)">添加员工</el-button> <el-button size="mini" @click="openDialog(false, scope.row)">编辑</el-button>
2.让这两个按钮都绑定同一个事件(绑定打开对话框事件，并传入参数)
openDialog(false, scope.row)
传入参数的作用:
参数1：
用来表示是添加还是编辑
参数2：
当 参数1 为 false 时，这个参数应该传递一个代表要编辑的员工对象。如果 参数1为 true，则此参数可以为空或不提供，因为在这种情况下不需要填充任何初始数据到表单中。
将传入的 参数1参数值赋给一个响应式变量 对话框标题，这可能用于在模板中根据不同情况显示不同的内容或行为（例如，改变对话框标题）。
如果 参数1是 false 并且 employee 对象存在，则使用 Object.assign 方法将 employee 的属性复制到 employeeForm.value 中，从而预填充表单字段。 如果 参数1是 true 或者 employee 不存在，则重置 employeeForm.value 为默认的空值，以便用户可以从头开始填写新员工的信息。
最后一步是设置另一个响应式变量 dialogVisible 为 true，这样就可以触发对话框的显示。通常 dialogVisible 是与 <el-dialog> 组件绑定的属性，用来控制对话框是否可见。
const openDialog = (isNew, employee = null) => {isNewRecord.value = isNew;if (!isNew && employee) {Object.assign(employeeForm.value, employee);} else {Object.assign(employeeForm.value, {id: '',name: '',job: '',mgr: '',hiredate: '',sal: '',comm: '',deptno: ''});}dialogVisible.value = true;
};
3.给关闭对话框绑定事件
const closeDialog = () => {dialogVisible.value = false;
};
4.给提交对话框绑定事件(向后台发送编辑或添加的请求)发送完请求，重写更新表格，关闭对话框即可
const submitForm = async () => {isSubmitting.value = true;try {let response;if (isNewRecord.value) {// 添加新员工console.log(employeeForm.value);response = await axios.post('http://localhost:8080/api/addEmp', employeeForm.value, {headers: {'Content-Type': 'application/json'}});ElMessage({message: '员工添加成功',type: 'success'});} else {// 编辑现有员工response = await axios.put(`http://localhost:8080/api/emp/${employeeForm.value.id}`, employeeForm.value);ElMessage({message: '员工信息更新成功',type: 'success'});}fetchData();closeDialog();console.log(response.data);} catch (error) {console.error('Error submitting data:', error);ElMessage({message: '提交数据时出错，请检查输入并重试。',type: 'error'});} finally {isSubmitting.value = false;}
};
5.实现效果(编辑框和添加框共用)
