乐趣区

关于前端:element-plus-vue3表单第一次数据未清空的bug问题解决

jiezi

应用框架：element Plus + vue3

场景形容：

场景一：
表单的增加和批改性能，专用同一个弹框，点击批改后，点击增加表单显示的是上次批改的数据。
场景二：
点击批改，数据回显到表单，而后点击勾销敞开弹框，在敞开的时候应用 resetFields() 清空数据，第二次点击批改的时候，回显的数据能够清空，然而表单的值会默认到第一次回显的数据。而且点击增加的时候，默认展现的就是第一次回显的数据。

官网提供表单校验以及革除数据的办法

场景一问题解决：

element plus的弹框有一个 close 办法，这个办法为弹框敞开时触发，在这个 close 办法内调用清空表单办法resetFields()，清空表单校验以及初始化表单数据。

<el-dialog
      :close-on-click-modal="false"
      @close="closeGift(giftBoxRef)"
      :title="!isUpdate ?' 增加 ':' 批改 '"v-model="BoxShow" >
</el-dialog>
 
 // 敞开弹框
const closeGift = (formEl: FormInstance | undefined) => {
  BoxShow.value = false;
  if (!formEl) return;
  formEl.resetFields();  // 革除表单校验以及表单数据初始化};

场景二问题解决：

起因：在 dialog 弹框关上的时候，form表单的数据回显，这个时候表单的初始化数据其实是被回显的数据替换掉了，resetFields()在清空数据的时候，会默认复原数据到数据的初始值，如果第一次表单回显时初始化数据被替换，那么后续 resetFields() 清空数据后复原到的值会始终是第一次回显的值。

vue2
在 vue2 中能够应用 this.$nextTick(() => {// 这里对表单进行赋值}) 的办法解决

/* 批改 */
const updateBox = async (row: any) => {this.$nextTick(() => {
    // 这里对表单进行赋值
    // formData = row
    })
}

vue3
在 vue3 中也能够应用 nextTick 解决

import {nextTick} from "vue";

/* 批改 */
const dialogShow = ref(false);  // 开启对话框
const updateBox = async (row: any) => {
    dialogShow.value = true;
    nextTick(() => {// formData = row});
};

nextTick 是将回调推延到下一个 DOM 更新周期之后执行。在更改了一些数据以期待 DOM 更新后立刻应用它。

留神：nesxTick 倡议放在函数的最初一步，如果 dialogShow 放在 nextTick 后，nextTick 将不会产生作用。

表单清空的注意事项

element的 resetFields() 函数清空表单数据其实是跟表单上的 prop 属性无关的，只有表单上存在对应的 prop 属性，数据才会被革除。

<el-form
        :model="data"
        :rules="rule"
        ref="giftBoxRef"
        label-width="100px"
        label-suffix=":"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="data.name" placeholder="请输出名称" />
        </el-form-item>
        <el-form-item label="形容">
          <el-input v-model="data.priceDesc" placeholder="请输出形容" />
        </el-form-item>
</el-form>

const data = ref({
  name : null,
  priceDesc : null
})

在这里，名称的输入框增加了 prop=name，形容的局部没有增加，所以应用resetFields() 清空表单数据时，只会重置 data 内的 name 值。而 priceDesc 的值不会有任何变动，须要手动重置。

退出移动版