[筆記] Element Plus El-form 表格 resetFields 問題和解決 @地瓜大的飛翔旅程

章節連結

程式碼

方法一
方法二
方法三

參考資料

El-form 的 resetFields 的參照資料是在「一開始生成」的時候取得的。若你想要讓 create 和 update 都共用同樣的元件，那會需要作一些額外操作來讓 El-form 元件更新參照。這邊筆記下兩種方式。

程式碼

方法一

在 resetFields 方法呼叫時，也手動更新你的 model 值參照。你可以用 Object.assign() 方法或是 lodash 函式的 cloneDeep()

const handleReset = (form: FormInstance | undefined) => {
  form?.resetFields()
  formDataModel.value = cloneDeep(props.originalValue)
}

const handleReset = (form: FormInstance | undefined) => {

form?.resetFields()

formDataModel.value = cloneDeep(props.originalValue)

}

方法二

由於 resetFields 方法也可讓 form 的重新生成來達成更新，因此你可以用 nextTick 的方法來解決

const changeMode = (
  mode: "create" | "update" | "",
  value: Record<string, any>
) => {
  currentMode.value = "" // force re-render
  nextTick(() => {
    currentMode.value = mode
    form.value = value
  })
}

const changeMode = (

mode: "create" | "update" | "",

value: Record<string, any>

) => {

currentMode.value = "" // force re-render

nextTick(() => {

currentMode.value = mode

form.value = value

})

}

方法三

在外層的 Component 上加一個 key 值，每次觸發新增/更新表單按鈕時，就將 Component 的 key 值改變 ( 通常是 +1 )，這樣一來就會讓 Component 更新。

<template>
  <MyComponent :key="componentKey" />
</template>


import { ref } from 'vue';
const componentKey = ref(0);

const forceRerender = () => {
  componentKey.value += 1;
};

</template>

import { ref } from 'vue';

const componentKey = ref(0);

const forceRerender = () => {

componentKey.value += 1;

};

參考資料

1. 解决Element resetFields()重置表单不生效的问题
2. The correct way to force Vue to re-render a component

按讚加入粉絲團

程式碼

方法一

方法二

方法三

參考資料

延伸閱讀