记录使用el-form的resetFields时遇到的表单数据回显失败的问题,去除nextTick解决

首先简单介绍一下resetFields的基础作用

element-plus官网el-form介绍

本案例中实现点击每行的编辑按钮时,弹出弹窗和表单

由于设置了表单校验,如图,表单内容不符合设定的校验规则时会有提示

如果仅仅这样就会出现问题,下次打开表单时,表单上还会显示红色提示字 ,对用户就很不友好,因此需要使用resetFields进行消除校验

使用先很简单,首先对el-form绑定refform="formRef"

html 复制代码
<el-form
      :model="formData"
      label-position="top"
      :rules="rules"
      ref="formRef"
      v-loading="loading"
    >
    表单内容部分
</el-form>

在自己需要的地方执行函数就行了,记得提前定义formRef

js 复制代码
const formRef=ref(null)
//自定义执行逻辑
//清空表单校验情况
  if (formRef.value) {
    formRef.value.resetFields()
  }

遇到的问题介绍

首先给大家说明一下我的函数执行逻辑

用户点击增加或编辑按钮打开对话框 - -> 调用自定义的resetForm函数重置表单数据并清空校验状态 - -> 如果用户点击的编辑按钮,回显数据到表单上

附上相关代码

js 复制代码
//点击编辑用户打开对话框
const onClickOpenEditDialog = function (row) {
  resetForm()
  //数据回显
  formData.value.birthday = row.birthday
  formData.value.name = row.name
  formData.value.citizenId = row.citizenId
  id.value = row.id
  //打开弹框
  dialogFormVisible.value = true
}

//重置表单数据
const resetForm = function () {
  formData.value = {
    citizenId: '',
    name: '',
    birthday: null
  }
  loading.value = false
  //清空表单校验情况
  nextTick(() => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
})
}

重点在于,众所周知dom元素渲染需要时间,我为了防止dom还没加载出来,formRef还没绑定的时候就调用resetFields函数 ,因此添加了nextTick

遇到的问题

第一次打开编辑弹窗时,表单成功回显出该行的数据,之后无论在哪行打开弹窗,表单内容都还保留第一次打开的数据!

问题就出在刚才添加的nextTick上,由于我在执行resetForm函数后再对表单数据进行赋值,nextTick后执行的resetFields函数又重新设置值了,导致表单数据回显失败

解决方法

去掉nextTick即可,由于调用formRef的resetFields之前有添加if判断,因此就算第一次打开弹窗,ref元素还没加载成功也不会报错

相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果4 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄5 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰5 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询