vue2+elementUI,vue3+elementPlus解决form中的下拉列表回写显示id,不显示label

news2024/11/15 21:43:18

三个问题:

问题1:vue2+elementui中form下的下拉列表回写,赋值之后会出现更改不了值的情况
问题2:表单中绑定的值是v-model=‘form.father.son’ 这种多级响应不了,把这种多级改成单级 v-model=‘form.son’ 就不会出现值更改不了的情况
问题3:vue3+elementPlus 表单基础多选,回写的时候显示的是id 不是label名称,因为我的类型错误导致的

如下:

问题1:vue2+elementui中form下的下拉列表回写,赋值之后会出现更改不了值的情况,原因是我之前的赋值方式是

问题代码:

edit(row){
	//显示弹窗
	this.centerDialogVisible = true
	// 给表单中的输入框赋值
	this.form.title=row.title
	// 给表单中的下拉框赋值
	this.form.teacher_id=row.teacher_id
}

更改之后的代码:

edit(row){
	//显示弹窗
	this.centerDialogVisible = true
	
	this.form={
		title:row.title,// 给表单中的输入框赋值
		teacher_id:row.teacher_id// 给表单中的下拉框赋值
	}


}

问题2:表单中绑定的值是v-model=‘form.father.son’ 这种多级响应不了,把这种多级改成单级 v-model=‘form.son’ 就不会出现值更改不了的情况

问题3:vue3+elementPlus 表单基础多选,回写的时候显示的是id 不是label名称,因为我的类型错误导致的
后端给的数据是字符串类型的 1,4,3,2
在这里插入图片描述

在这里插入图片描述
但是elementplus中需要的是数字类型的数组
在这里插入图片描述
直接字符串转数组,转出来的类型是 [‘1’,‘4’,‘3’,‘2’]
需要把数组中的字符串转成数字类型 [1,4,3,2],使用.map(Number) 方法

问题代码:

 ruleForm.template_ids = row.template_id ? row.template_id.split(',') : []

正确代码:

 <el-form ref="ruleFormRef" :model="ruleForm" >
	<el-form-item label="选择模板:" prop="">
	  <el-select v-model="ruleForm.template_ids" filterable multiple placeholder="请选择/输入"
	 >
	      <el-option :label="item.template_title" :value="item.id" v-for="(item, index) in mubanArr"
	          :key="index"></el-option>
	  </el-select>
	</el-form-item>
</el-form>
		let template_id = row.template_id.split(',') // ['1','4','3','2']
        let xx = template_id.map(Number) //  [1,4,3,2]
        ruleForm.template_ids = xx.length > 0 ? xx : [] //给表单赋值回写

vue3中表单的回写方式如下:(不是写在一起,单独排列开)

ruleForm.title = row.title
ruleForm.teacher_id = row.teacher_id

这是我自己实验出来的代码,效果是好的,如有不足或者有更好的方法,欢迎指正探讨

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

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

相关文章

剖析伦敦银最新价格走势图

国际金融市场瞬息万变&#xff0c;伦敦银的价格走势会受到诸多因素的影响&#xff0c;比如重要经济数据的公布&#xff0c;国际间的政治博弈&#xff0c;突发的政经大事&#xff0c;都可以令白银价格的走势&#xff0c;在短时间内暴涨暴跌的情况。 要在伦敦银市场实现良好的收益…

绝地求生玩家必读:掌握干货,保障交易安全,一站式解决你的需求!

绝地求生作为热门游戏&#xff0c;吸引了大批玩家的参与。然而&#xff0c;由于游戏账号交易存在一些风险&#xff0c;很多玩家为了保障自己的利益&#xff0c;开始寻找一种安全、便捷的交易方式。幸运的是&#xff0c;现在有了一个专门为游戏账号二手交易服务的网站——闲游盒…

RNN/LSTM学习记录

一.RNN 什么是循环神经网络&#xff1a; 循环神经网络&#xff0c;从名字上理解“循环”&#xff0c;即为构成一个往复的结构&#xff0c;它有着这样的特点&#xff0c;对时序特征的数据十分敏感&#xff0c;能够挖掘出数据中的书序信息以及语义信息。 什么是序列特性呢&…

Python+Tkinter 图形化界面基础篇:添加图形和图像

PythonTkinter 图形化界面基础篇&#xff1a;添加图形和图像 引言添加图形元素步骤1&#xff1a;导入 Tkinter 步骤2&#xff1a;创建主窗口步骤3&#xff1a;创建 Canvas 步骤4&#xff1a;绘制图形 绘制线条 绘制矩形 绘制椭圆 绘制多边形 步骤5&#xff1a;启动主事件循环 显…

学信息系统项目管理师第4版系列23_成本管理

1. 项目成本失控的原因 1.1. 对工程项目认识不足 1.1.1. 对信息系统工程成本控制的特点认识不足 1.1.2. 工程项目的规模不合理 1.1.3. 工程项目设计及实施人员缺乏成本意识 1.1.4. 对项目成本的使用缺乏责任感 1.2. 组织制度不健全 1.2.1. 制度不完善 1.2.2. 责任不落实…

【考研408常用数据结构】C/C++实现代码汇总

文章目录 前言数组多维数组的原理、作用稀疏数组 链表单向链表的增删改查的具体实现思路约瑟夫环问题&#xff08;可不学&#xff09;双向链表 树二叉搜索树中序线索二叉树哈夫曼树的编码与译码红黑树B树B树 堆顺序与链式结构队列实现优先队列排序算法&#xff08;重点&#xf…

信创办公–基于WPS的EXCEL最佳实践系列 (单元格与行列)

信创办公–基于WPS的EXCEL最佳实践系列 &#xff08;单元格与行列&#xff09; 目录 应用背景操作步骤1、插入和删除行和列2、合并单元格3、调整行高与列宽4、隐藏行与列5、修改单元格对齐和缩进6、更改字体7、使用格式刷8、设置单元格内的文本自动换行9、应用单元格样式10、插…

【力扣】智力题+排序+距离和:2731. 移动机器人

【力扣】智力题排序距离和&#xff1a;2731. 移动机器人 文章目录 【力扣】智力题排序距离和&#xff1a;2731. 移动机器人1. 题目介绍2. 思路3. 解题代码4. Danger参考 1. 题目介绍 有一些机器人分布在一条无限长的数轴上&#xff0c;他们初始坐标用一个下标从 0 开始的整数数…

windows部署django服务器

windows部署django服务器 1、安装IIS1.1 控制面板-----程序----程序和功能----启用或关闭windows功能1.2安装IIS服务器&#xff0c;完成后&#xff0c;重新进入&#xff0c;把CGI安装进系统 2、安装python与虚拟环境2.1 安装python2.2 安装virtualenv虚拟环境2.3 创建一个虚拟环…

关于谷歌浏览器设置打开时页面不起作用的解决方法

背景 1、由于我前面不知道怎么操作的&#xff0c;导致我在设置新建标签页和打开软件时默认打开网页的时候&#xff0c;都不起作用&#xff0c;每次都默认打开谷歌&#xff0c;结果&#xff0c;没有梯子&#xff0c;谷歌还看不了 解决方法 这里我的解决方式有点粗暴&#xff0…

StreamingLLM输入、输出无限长的小记

本文中&#xff1a; 最多400万token上下文、推理提速22倍&#xff0c;StreamingLLM火了&#xff0c;已获GitHub 2.5K星 提到了StreamingLLM可以提供给模型无限输入、无限输出的能力&#xff0c;大概解读一下这个概念 可以实现&#xff1a; 可以支持无限输入&#xff0c;但原理…

沪深300期权一个点多少钱?

经中国证监会批准&#xff0c;深圳证券交易所于2019年12月23日上市嘉实沪深300ETF期权合约品种。该产品是以沪深300为标的物的嘉实沪深300ETF交易型指数基金为标的衍生的标准化合约&#xff0c;下文介绍沪深300期权一个点多少钱?本文来自&#xff1a;期权酱 一、沪深300期权涨…

YOLOV8改进:soft-nms、DIOU-nms、SIOU-nms、EIOU-nms、WIOU-nms

1.nms介绍 1.1 nms NMS&#xff08;Non-Maximum Suppression&#xff0c;非极大值抑制&#xff09;是一种常用的目标检测算法&#xff0c;用于抑制冗余的边界框&#xff0c;保留最具代表性的目标框。 在目标检测任务中&#xff0c;通常会生成多个候选边界框&#xff08;boun…

基于SSM的网络安全宣传网站设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

立即提升吃鸡战斗力!分享顶级游戏干货!

各位吃鸡玩家&#xff0c;您好&#xff01;在这里&#xff0c;我将与您分享一些提高游戏战斗力的实用技巧&#xff0c;同时带您体验顶级游戏作战干货&#xff01; 首先&#xff0c;我向您推荐绝地求生作图工具。通过使用这些强大的作图工具&#xff0c;您可以轻松编辑出炫酷的吃…

华为OD机考算法题:字符串划分

题目部分 题目字符串划分难度难题目说明给定一个小写字母组成的字符串s&#xff0c;请找出字符串中两个不同位置的字符作为分割点&#xff0c;使得字符串分成的三个连续子串且子串权重相等&#xff0c;注意子串不包含分割点。 若能找到满足条件的两个分割点&#xff0c;请输出…

bert----学习笔记

一个简单基础模板&#xff1a; bert导入&#xff0c;分词&#xff0c;编码 from transformers import BertConfig, BertTokenizer, BertModel import torch from transformers import BertModel, BertTokenizer # 指定模型文件夹路径&#xff08;包含 pytorch_model.bin&#…

面面俱到:揭秘吃鸡新手最关心的要领和细节,全方位指引你成为绝地求生高手!

你是否正在探索绝地求生的神秘世界&#xff0c;却感到迷茫和困惑&#xff1f;想要掌握吃鸡的要领和细节&#xff0c;成为一名顶尖玩家吗&#xff1f;现在&#xff0c;我们将为你揭秘吃鸡新手最关心的要领和细节&#xff0c;带你全面了解这个充满挑战的游戏。无论是如何选择起跳…

摆脱繁杂工作:Appwrite 带你高效开发 | 开源日报 No.50

TheAlgorithms/Java Stars: 53.8k License: MIT 这个项目是一个用 Java 实现的算法集合&#xff0c;旨在提供学习目的。它包含了各种不同类型的算法&#xff0c;并且可以通过 Gitpod.io 进行运行、编辑和贡献。该项目具有以下核心优势&#xff1a; 提供了大量常见算法及其实…

澳大利亚教育部宣布ChatGPT将被允许在澳学校使用!

教育部长最近宣布&#xff0c;从 2024 年起&#xff0c;包括 ChatGPT 在内的人工智能将被允许在所有澳大利亚学校使用。 &#xff08;图片来源&#xff1a;卫报&#xff09; 而早些时候&#xff0c;澳洲各高校就已经在寻找与Chatgpt之间的平衡了。 之前&#xff0c;悉尼大学就…