element框架select值更新页面不回显的问题,动态表单props绑定问题

1、页面中使用form表单,引入select组件

当data中默认没有定义form.region的值时,会出现选择select后input没有回显选择数据值;所以使用select时,必须定义默认值

<el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item>
</el-form>
<script>export default {data() {return {form: {name: '',region: ''}}},methods: {onSubmit() {console.log('submit!');}}}
</script>

2、嵌套层次过多,select选中值页面不回显的解决方法,动态表单props的绑定

强制重新加载页面@visible-change=“$forceUpdate()”

<el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">
<el-form-item label="备注" prop="remark"><el-input v-model="form.remark" placeholder="请输入备注"/>
</el-form-item>
<el-row v-for="(item,index) in form.details" :key="index"><el-col :span="12"><el-form-item label="活动区域" :prop="'details['+index+']region'" label-width="75px"><el-select v-model="form.region" placeholder="请选择活动区域" @visible-change="$forceUpdate()"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-col><el-col :span="12"><el-form-item label="是否启用" :prop="'details['+index+']status'" label-width="75px"><el-switch v-model="item.status" active-value="Y" inactive-value="N" @change="$forceUpdate()"></el-switch></el-form-item></el-col>
</el-row>
</el-form>//也可在方法中使用
methods:{update(){this.$forceUpdate();//强制刷新视图}
}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/7374.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

聊一聊人工智能与视频技术的5大发展趋势与应用

随着互联网的快速发展&#xff0c;视频时代已经到来。据统计&#xff0c;目前互联网内容中&#xff0c;视频内容占据高达82%的流量&#xff0c;未来仍将持续增长。今天我们就来聊一聊关于视频技术的发展&#xff0c;以及现在的大热门–人工智能技术与视频技术的结合。 视频技术…

第38节:cesium 风场效果(含源码+视频)

结果示例: 完整源码: <template><div class="viewer"><vc-viewer @ready="ready" :logo="false"><!

CUDA中的缓存

CUDA缓存包括L1缓存和L2缓存。 SM加载数据&#xff0c;根据不同的设备和类型分为三种路径&#xff1a; 一级和二级缓存常量缓存只读缓存 常规的路径是一级和二级缓存&#xff0c;需要使用常量和只读缓存的需要在代码中显式声明。但是提高性能&#xff0c;主要还是要取决于访问…

茶油生产加工MES质量溯源平台源码(spring boot+mybatis+easyui+mysql+h5)

一、生产加工MES&#xff08;Manufacturing Execution System&#xff0c;简称MES&#xff09;是一种面向车间的生产过程管理与实时信息系统。它主要负责监控生产过程&#xff0c;管理生产资源&#xff0c;优化生产流程&#xff0c;提高生产效率和质量。MES系统需要与ERP系统、…

Android TV:自定义Leanback的VideoDetailsFragment

在Android studio新建TV项目的demo上做修改,实现一下需求: 1、去掉顶部背景区域 2、修改中间详情区域高度 3、修改整体背景界面 效果如图: 搜遍全网,没有找到一个解决方案。只能考自己看代码来自定义实现了。 1、去掉顶部背景区域: VideoDetailsFragment中重写setupD…

【Java项目】拉取公司GitLab项目的教程

文章目录 创建Git账号登录Git 创建Git账号 进入公司后&#xff0c;会拿到公司给你注册的邮箱以及密码&#xff0c;你得到用户名和密码之后&#xff0c;需要先创建一个拉取这个仓库对应的git账号。 我们先登录GitLab 当你登录GitLab之后&#xff0c;会显示你还没有ssh key&…

UE4/5数字人Metahuman与Style3D的使用【二、布料模拟】

目录 鼠标点击布料模拟&#xff1a; 让布料模拟可以跟着动画序列&#xff1a; 有穿模情况&#xff1a; 多件衣服替换&#xff1a; 关卡序列中使用缓存&#xff1a; 效果&#xff1a; UE4/5数字人Metahuman与Style3D的使用【一、Style3DAtelier软件制作smd格式衣服并导入ue】…

VMware虚拟机迁移到阿里云

1. 前言 最近公司内部研发部门有几台jenkins build机器运行在VMware平台上面&#xff0c;由于本地VMware平台底层计算资源不足导致虚拟机运行速度特别慢&#xff0c;每次版本发布都要build好久&#xff0c;而且VMware有时候计算资源不足&#xff0c;还会自动给占用资源大的机器…

使用Docker安装mysql8

Docker中安装mysql8 ​ 本文记录时间为2023-07-04&#xff0c;文档内容主要参照mysql官方文档写成。 一、获取mysql镜像 ​ 此处参考mysql官方的文档&#xff0c;从Oracle的镜像库中查找所需的mysql镜像信息&#xff0c;此处选择的是community-server:8.0 # 拉取myssql com…

Linux12.进程替换

1.进程替换 :将磁盘上新的程序加载到内存中&#xff0c;并和当前进程的页表重新建立映射&#xff0c;这个工作可以调用操作系统的接口完成。 2.execl(函数)&#xff0c;使用该函数后面跟上exit(1)。 3.makefile一次形成多个可执文件 4.chdir函数&#xff0c;作用类似于cd指令。…

LabVIEW开发工业物联网状态监测

物理对象的网络&#xff0c;允许在它们之间传输数据。信息通常保存在集中式云数据库中。由于物联网&#xff0c;我们现在可以从远处进行监控和感知。由于网络和通信的增加&#xff0c;越来越多的流程可能会自动化。 调度、维护管理和质量改进等关键领域的决策正受到大数据技术…

TypeScript ~ 掌握基本类型 ①

作者 : SYFStrive 博客首页 : HomePage &#x1f4dc;&#xff1a; TypeScript ~ TS &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;觉得文章不错可以点点关注 &…