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);
};
