记一次elementui el-form组件resetFields方案无法重置部分字段值的问题

最新推荐文章于 2023-12-21 17:05:48 发布

稳健的一休哥

最新推荐文章于 2023-12-21 17:05:48 发布

阅读量6.7k

点赞数

分类专栏： Web前端文章标签： elment-ui el-form resetFields

本文链接：https://blog.csdn.net/weixin_40119256/article/details/101289356

版权

背景

今天在使用elementui时，出现了一个诡异的问题，编辑、新增功能公用的表单，绑定数据后，关闭模态框无法重置部分表单项的值，如下图所示：

点击编辑按钮，打开模态框如下图：

关闭编辑模态框后，打开新增模态框，如下图（图中资源路径字段并未被重置）：

问题排查

是否el-form-item缺失了prop字段？
表单绑定的值是否与data中定义的变量不一致？
是否因为缺少了$nextTick函数？

代码如下：

<!-- Form -->
<el-form ref="editForm" :model="edit.data" :rules="edit.rules" label-width="80px" label-position="left" >
  <!-- 部分字段略... -->
  <el-form-item prop="type" label="类型">
    <el-select v-model="edit.data.type" placeholder="请选择菜单类型" :disabled="edit.data.id !== null" >
      <el-option v-for="(item,index) in validMenuTypes" :label="item.name" :value