1.先在前端设置一个添加按钮
<el-button type="primary" @click="openAddEmployeeDialog">添加员工</el-button>
2.给添加员工绑定事件openAddEmployeeDialog，用户点击该按钮弹出对话框
const openAddEmployeeDialog = () => {dialogVisible.value = true;
};
3.根据需要添加数据，编写对话框
<el-dialog v-model="dialogVisible" title="添加员工" width="30%"><el-form :model="employeeForm" label-width="100px" class="add-employee-form"><el-form-item label="员工ID"><el-input v-model="employeeForm.id" placeholder="请输入ID"></el-input></el-form-item><el-form-item label="员工姓名"><el-input v-model="employeeForm.name" placeholder="请输入姓名"></el-input></el-form-item><el-form-item label="职位"><el-input v-model="employeeForm.job" placeholder="请输入职位"></el-input></el-form-item><el-form-item label="职级关系"><el-input v-model="employeeForm.mgr" placeholder="请输入职级关系"></el-input></el-form-item><el-form-item label="雇佣日期"><el-input v-model="employeeForm.hiredate" placeholder="请输入雇佣日期"></el-input></el-form-item><el-form-item label="月薪"><el-input v-model="employeeForm.sal" placeholder="请输入月薪"></el-input></el-form-item><el-form-item label="奖金"><el-input v-model="employeeForm.comm" placeholder="请输入奖金"></el-input></el-form-item><el-form-item label="部门编号"><el-input v-model="employeeForm.deptno" placeholder="请输入部门编号"></el-input></el-form-item></el-form><template #footer><span class="dialog-footer"><el-button @click="closeDialog">取消</el-button><el-button type="primary" @click="addEmployee">确认添加</el-button></span></template></el-dialog>
-
关闭对话框
const closeDialog = () => {dialogVisible.value = false;
};
-
提交对话框数据
const addEmployee = async () => {try {const response = await axios.post('http://localhost:8080/api/addEmp', employeeForm.value, {headers: {'Content-Type': 'application/json'}});console.log('Employee added successfully:', response.data);// 关闭对话框并清空表单closeDialog();// 刷新表格数据fetchData();} catch (error) {console.error('Error adding employee:', error);}
};
4.设置会话框的可见性
const dialogVisible = ref(false);
5.实时监听会话框数据
const employeeForm = ref({id: '',name: '',job: '',mgr:'',hiredate:'',sal:'',comm:'',deptno:''
});
