在el-dialog中使用el-form資料無法清空

南无、發表於2024-04-25
ORM

問題

日常開發中，常利用el-dialog + el-form去進行表格項的新增和修改，在開發過程中，發現先點選編輯，後點選新增，位於dialog中的form表單無法清空。

問題程式碼

const formInfo = ref<FormInfo>({
    // ...
});
const toAdd = () => {
  dialogType.value = "add";
  dialogVisible.value = true;
  nextTick(() => {
    formRef.value.resetFields(); // 此時無論resetFields寫在nextTick中還是利用定時器等都不起作用
  });
};
const toEdit = (item: any) => {
  dialogType.value = "edit";
  dialogVisible.value = true;
  Object.assign(formInfo.value, item);
};

問題原因

在toEdit方法中，將dialogVisible的值設為true之後，el-dialog正處於渲染中，在Mounted()生命週期之前，就將表單值賦值了，此時表單Mounted之後，就認為賦值後的為表單的初始值，而不是const formInfo宣告處為初始值，而resetFields方法是將表單重置為初始值，就無法清空第一次編輯的資料。

解決辦法

const toEdit = (item: any) => {
  dialogType.value = "edit";
  dialogVisible.value = true;
  // 在編輯賦值時使用nextTick使表單Mounted之後再去執行賦值
  nextTick(() => {
    Object.assign(formInfo.value, item);
  });
};

相關文章