1、前提：自定义列模版(把id作为参数，传递到调用的edit函数里)

        <template #default="scope"><el-button type="primary" size="small" @click="edit(scope.row.id)"><el-icon><EditPen /></el-icon>编辑</el-button><el-button type="danger" size="small"><el-icon><Delete /></el-icon>删除</el-button></template>

2、阅读EP官方文档，可以scope.row拿到这一行的数据，再.id，拿到这行的id（再根据传回来的id进行查询）

// 编辑
let edit = async (id) => {formTitle.value = "编辑部门";  // 动态设置对话框名称const result = await querryByIdApi(id);if (result.code) {dialogFormVisible.value = true; // 显示对话框名称dept.value = result.data;   // 将返回的数据回显}// 重置表单if (!deptFormRef.value) return;deptFormRef.value.resetFields();
};

3、根据id查询的函数

// 根据id查询部门数据
export const querryByIdApi = (id) => {return request.get(`/depts/${id}`);
};

注意：我们把返回的数据赋值给了dept,因此dept此时含有多个属性，因此，后面可以根据dept中是否有id进行更新，还是新增

核心代码；

let save = async () => {// 表单校验if (!deptFormRef.value) return;deptFormRef.value.validate(async (valid) => {// valid表示校验是否通过 true:通过 false:未通过if (valid) {// 通过let result;if (dept.value.id) {// 修改result = await updateApi(dept.value);} else {// 新增result = await addApi(dept.value);}if (result.code) {// 新增成功// 提示信息ElMessage.success("新增成功");// 关闭对话框dialogFormVisible.value = false;// 刷新数据search();} else {// 新增失败ElMessage.error(result.msg);}} else {ElMessage.error("表单校验未通过");}});
};

修改请求：

// 修改
export const updateApi = (dept) => {return request.put("/depts", dept);
};