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

news2024/11/17 23:39:03

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.coloradmin.cn/o/707131.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

常见面试题之线程中并发锁(二)

1. 什么是AQS&#xff1f; 1.1. 概述 全称是AbstractQueuedSynchronizer&#xff0c;是阻塞式锁和相关的同步器工具的框架&#xff0c;它是构建锁或者其他同步组件的基础框架 AQS与Synchronized的区别 synchronizedAQS关键字&#xff0c;c语言实现java语言实现悲观锁&#…

CISSP证书考试难度大吗?本文教你如何轻松拿下CISSP

主题&#xff1a;CISSP含金量、CISSP考试经验、CISSP备考、CISSP考试大纲 CISSP含金量高 CISSP注册信息系统安全师认证是信息安全领域被全球广泛认可的IT安全认证&#xff0c;一直以来被誉为业界的“金牌标准”。CISSP认证不仅是对个人信息安全专业知识的客观评估&#xff0c…

给若依添加单元测试(一)

给若依添加单元测试 方案二&#xff08;异常困难但企业开发一般用这个&#xff09; 方案一&#xff08;简单&#xff09; 在 admin 模块中添加单元测试 S1.在 src 目录下创建 test.java.MapperTests 文件 S2.将以下内容复制进去 import com.ruoyi.RuoYiApplication; imp…

初学mybatis(六)动态sql

学习回顾&#xff1a;初学mybatis&#xff08;五&#xff09; 一、动态SQL 介绍 什么是动态SQL&#xff1a;动态SQL指的是根据不同的查询条件 , 生成不同的Sql语句. 官网描述&#xff1a; MyBatis 的强大特性之一便是它的动态 SQL。如果你有使用 JDBC 或其它类似框架的经验&…

小研究 - Java 指针分析综述(三)

近年来静态程序分析已成为保障软件可靠性、安全性和高效性的关键技术之一. 指针分析作为基 础程序分析技术为静态程序分析提供关于程序的一系列基础信息&#xff0c;例如程序任意变量的指向关系、变量 间的别名关系、程序调用图、堆对象的可达性等. 介绍了 Java 指针分析的重要…

微信小程序:实名认证登录 [2018年]

1、[微信开发社区]微信支付实名信息小程序授权接口能力&#xff08;用户获取用户真实姓名&#xff0c;身份证号码&#xff09; 微信开放社区 2、注意事项 四、接口文档 略。

English Learning - L3 纠音 W8 Lesson7 Ted Living Beyond Limits 2023.06.27 周二

朗读内容&#xff1a; Lesson 7 Day 47 - 51 句子 Ted Living Beyond Limits 3-22

GPT-4 参加2023年高考数学,人工智能对话机器人和人类对决,快谁速度快

ChatGPT从入门到精通&#xff0c;一站式掌握办公自动化/爬虫/数据分析和可视化图表制作 全面AI时代就在转角 道路已经铺好了 “局外人”or“先行者” 就在此刻 等你决定 让ChatGPT帮你高效实现职场办公&#xff01;行动起来吧。 【点击查看更多知识】ChatGPT从入门到精通&am…

springboot中Thymeleaf模板插入Freemarker模板页面

概述 最近在修改springboot架构的项目&#xff0c;项目之前配置的是Thymeleaf模板&#xff0c; 但是在我新加的功能中&#xff0c;我非常想用Freemarker模板来新加一些页面功能。 看到网上很多其他地方描述&#xff0c;要么用不同的文件后缀来区分(如html文件为Thymeleaf&…

【java 程序设计实训】学生请假管理系统

学生请假管理系统 运行结果学生请假管理系统需求分析GUI 编程事件处理数据库编程部分代码项目结构实体类 Admin.javaLeaveData.javaUserLogin.javaMainWindow.javaTeacherReviewFrame.javaleaveList.java 注&#xff1a;完整内容可下载查看完整报告 运行结果 学生请假管理系统需…

mac配置VScode主题加makefile etc

profile配置&#xff1a; 参考链接&#xff1a;https://www.bilibili.com/video/BV1YW4y1M7uX/?spm_id_from333.999.0.0&vd_sourced75fca5b05d8be06d13cfffd2f4f7ab5 https://code.visualstudio.com/docs/cpp/config-clang-mac vscode profiles如下&#xff1a; {//…

蓝桥杯专题-试题版-【九宫重排】【格子刷油漆】【回文数字】【国王的烦恼】

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…

空间曲线的切线和法平面与曲面的切平面和法线

&#xff08;一&#xff09;空间曲线的切线和法平面 1. 参数方程的形式 理解和记住如下逻辑&#xff1a; 该两个公式&#xff0c;笔者可以理解但是无法证明。 2. 参数方程外的第二种形式&#xff1a; 此种变换的本质&#xff0c;就是将多元函数转换为参数方程的形式。如此看…

English Learning - L3 作业打卡 Lesson7 Day54 2023.6.29 周四

English Learning - L3 作业打卡 Lesson7 Day54 2023.6.29 周四 引言&#x1f349;句1: I daydreamed like I did as a little girl and I imagined myself walking gracefully, helping other people through my journey and snowboarding again.成分划分连读爆破语调 &#x…

Learn Mongodb 可是工具及基本命令的使用 ③

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

Spark 3.4.0新特性--UI支持存储在RocksDB中

背景 对于Spark来说&#xff0c;目前存储所有的事件信息以及UI所需要的信息都是默认存储在内存中&#xff0c;这在CS中&#xff0c;对于以Spark作为 Server的模式下&#xff0c;会导致OOM&#xff0c;也会导致造成之前作者提交PR&#xff1a;Multi sparkSession should share …

Java泛型详解:为什么使用泛型?如何使用泛型?

Java泛型详解&#xff1a;为什么使用泛型&#xff1f;如何使用泛型&#xff1f; &#x1f498;一、为什么使用泛型&#xff1f;&#x1f498;二、如何使用泛型&#xff1f;&#x1f496;1. 泛型类的使用&#xff1a;&#x1f496;2. 泛型方法的使用&#xff1a;&#x1f496;3.…

什么是ABP?

1、ABP背后的思想——DDD&#xff08;领域驱动设计&#xff09; ABP架构&#xff1a; ABP实现了多层架构&#xff08;领域层&#xff0c;应用层&#xff0c;基础设施层和表示层&#xff09;&#xff0c;以及领域驱动设计&#xff08;实体&#xff0c;存储库&#xff0c;领域服…

(R)-tert-Bu4-DOTAGA,817562-90-6,(R)-DOTAGA-四叔丁酯,的反应特点及性质研究

​ 规格单位&#xff1a;g |货期&#xff1a;按​照具体的库存进行提供 | 纯度&#xff1a;95% 试剂描述&#xff1a; (R)-tert-Bu4-DOTAGA大环化合物是一种多齿配体&#xff0c;其配位原子位于环的骨架上&#xff0c;大环的配位原子可以是O、N、S、Se、P、As等。有二维的…

C++primer(第五版)第七章(类)

类的基本思想是数据抽象和封装. 数据抽象是一种依赖于接口和实现的分离的编程技术. 封装实现了类的接口和实现的分离. 7.1定义抽象数据类型 定义一个抽象数据类型使用关键字struct或是clas(差别仅在于默认访问权限修饰符). //这是一个简单的类定义 class Student{ …