- Java锁的逻辑(结合对象头和ObjectMonitor)
- 还在用饼状图?来瞧瞧这些炫酷的百分比可视化新图形(附代码实现)⛵
- 自动注册实体类到EntityFrameworkCore上下文,并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
在做管理台项目时,我们会经常使用到 表单+表格+弹窗表单 的组合,以完成对数据的 增、删、查、改 .
dialog
+表单 form
,实现对数据的添加和修改。 resetFields
方法对表单进行重置。 很多小伙伴可能会遇到表单重置的初始值问题,如图.
问题具体描述为:每次关闭弹窗时,表单不是重置为我们设置的空数据,而是重置为 在该页面上第一次打开弹窗时表单的数据 .
这意味着,如果我们进入页面后第一次打开的是 修改弹窗 ,那么以后每次表单重置的数据都是 最开始打开的那个修改弹窗表单的初始数据 .
让我们看下代码:
<template>
<div>
<!-- 添加 -->
<el-button @click="handleAdd">添加</el-button>
<!-- 表格 -->
<el-table :data="tableData" style="width: 800px">
<el-table-column prop="id" label="id" width="180" align="center" />
<el-table-column prop="name" label="名称" width="180" align="center" />
<el-table-column label="操作" align="center">
<template v-slot="{ row }">
<el-button @click="handleEdit(row)">修改</el-button>
</template>
</el-table-column>
</el-table>
<!-- 弹窗 -->
<el-dialog title="添加/修改" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" center>
<template>
<div>
<el-form ref="form" :model="formData">
<el-form-item prop="name" label="名称">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item prop="id" label="id">
<el-input v-model="formData.id"></el-input>
</el-form-item>
</el-form>
</div>
</template>
<template #footer>
<el-button type="primary">确定</el-button>
<el-button type="info">取消</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'formInitial',
data() {
return {
tableData: [
{ id: 1, name: '王小虎' },
{ id: 2, name: '刘小白' },
{ id: 3, name: '张晓来' },
],
formData: {
name: '',
id: '',
},
dialogVisible: false,
};
},
methods: {
// 添加
handleAdd() {
this.dialogVisible = true;
},
// 编辑 !!! 问题所在 !!!
handleEdit(row) {
// 给表单赋初值
this.formData.name = row.name;
this.formData.id = row.id;
// 打开弹窗
this.dialogVisible = true;
},
// 弹窗关闭
handleClose() {
// 初始数据
this.$refs.form.resetFields();
// 关闭弹窗
this.dialogVisible = false;
}
},
};
</script>
这里我们重点关注 handleEdit() 这个方法.
表面上看并没有什么问题,每次点击修改,打开弹窗前,表单赋初值.
这里就不跟大伙儿卖关子了,原因:
display: none
属性。 display: none
属性的作用:将元素从DOM结构中完全移除。 data
中的默认数据 formData
并没有作用上表单。 handleEdit()
方法,修改了 formData
。此时弹窗打开,新的 formData
作用上表单,并且表单将新的 formData
, 当作了初始数据 ! 解决思路很简单,就是想办法让表单吃上原始的 formData .
原来是先赋数据,再打开弹窗。那么现在改为先打开弹窗,再赋数据.
只需要修改 handleEdit() 方法:
// 编辑
handleEdit(row) {
// 打开弹窗
this.dialogVisible = true;
// 等到下次DOM渲染完成,即弹窗完全显示后执行
this.$nextTick(() => {
// 给表单赋初值
this.formData.name = row.name;
this.formData.id = row.id;
});
},
这里用到 this.$nextTick() ,是为了保证赋值是发生在弹窗打开后,所以弹窗打开的那一刻,表单使用的还是最初 data 中的 formData ,并将其作为表单初始值.
最后此篇关于elmentui表单重置初始值问题与解决方法的文章就讲到这里了,如果你想了解更多关于elmentui表单重置初始值问题与解决方法的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
@Cacheable在同一类中方法调用无效 上述图片中,同一个类中genLiveBullets()方法调用同类中的queryLiveByRoom()方法,这样即便标识了Cacheable标签,
目录 @Transaction注解导致动态切换更改数据库失效 使用场景 遇到问题 解决 @Transaction
@RequestBody不能class类型匹配 在首次第一次尝试使用@RequestBody注解 开始加载字符串使用post提交(貌似只能post),加Json数据格式传输的时候,
目录 @Autowired注入static接口问题 @Autowired自动注入普通service很方便 但是如果注入static修饰的serv
目录 @RequestBody部分属性丢失 问题描述 JavaBean实现 Controller实现
目录 解决@PathVariable参数接收不完整的问题 今天遇到的问题是: 解决办法: @PathVariable接受的参
这几天在项目里面发现我使用@Transactional注解事务之后,抛了异常居然不回滚。后来终于找到了原因。 如果你也出现了这种情况,可以从下面开始排查。 1、特性 先来了解一下@Trans
概述: ? 1
场景: 在处理定时任务时,由于这几个方法都是静态方法,在aop的切面中使用@Around注解,进行监控方法调用是否有异常。 发现aop没有生效。 代码如下:
最近做项目的时候 用户提出要上传大图片 一张图片有可能十几兆 本来用的第三方的上传控件 有限制图片上传大小的设置 以前设置的是2M&nb
我已经实现了这个SCIM reference code在我们的应用程序中。 我实现的代码确实通过了此postman link中存在的所有用户测试集合。 。我的 SCIM Api 也被 Azure 接受
我一直对“然后”不被等待的行为感到困扰,我明白其原因。然而,我仍然需要绕过它。这是我的用例。 doWork(family) { return doWork1(family)
我正在尝试查找 channel 中的消息是否仍然存在,但是,我不确定如何解决 promise ,查看其他答案和文档,我可以看到它可能是通过函数实现的,但我是不完全确定如何去做。我希望能在这方面获得一些
我有以下情况: 同一工作区中的 2 个 Eclipse 项目:Apa 和 Bepa(为简洁起见,使用化名)。 Apa 项目引用(包括)Bepa 项目。 我在 Bepa 有一个类 X,具有公共(publ
这个问题已经有答案了: Why am I getting a NoClassDefFoundError in Java? (31 个回答) 已关闭 6 年前。 我正在努力学习 spring。所以我输入
我正在写一个小游戏,屏幕上有许多圆圈在移动。 我在两个线程中管理圈子,如下所示: public void run() { int stepCount = 0; int dx;
我在使用 Sympy 求解方程时遇到问题。当我运行代码时,例如: 打印(校正(10)) 我希望它打印一个数字 f。相反,它给我错误:执行中止。 def correction(r): from
好吧,我制作的每个页面都有这个问题。我不确定我做错了什么,但我所有的页面都不适用于所有分辨率。可能是因为我使用的是宽屏?大声笑我不确定,但在小于宽屏分辨率的情况下,它永远不会看起来正确。它的某些部分你
我正在尝试像这样进行一个非常简单的文化 srting 检查 if(culture.ToUpper() == "ES-ES" || "IT-IT") { //do something } else
Closed. This question is off-topic. It is not currently accepting answers. Learn more。 想改进这个问题吗?Upda
我是一名优秀的程序员,十分优秀!