VUE id回写name的问题

起因

我们有部门,单位,传的是id,但是页面不管显示,还是回写,新增都要展示单位名/部门名。这个其实是前端的事情,但是我目前是前端也是我做,我们使用的是vue3,这个问题用List可能不好解决,但是用Map就解决了。

解决

作为一个全栈开发工程师,这个问题肯定是要解决的啦~

<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px"><el-form-item label="单位名称" prop="companyId"><el-select v-model="dataForm.companyId" placeholder="请选择单位" @change="loadDepartments"><el-optionv-for="(company, index) in this.companyList ":key="index":label="company[1]":value="company[0]"/></el-select></el-form-item><el-form-item label="部门名称" prop="departmentId"><el-select v-model="dataForm.departmentId" placeholder="请选择部门"><el-optionv-for="(department, index) in this.departmentList":key="index":label="department[1]":value="department[0]"/></el-select></el-form-item>
              this.companyList = data.page.list.map(company => [company.id, company.name])

OK,完美解决这个问题。

结束语

在软件开发的道路上,遇到问题是很正常的事情。解决问题的过程中,充分发挥了作为全栈开发工程师的多面能力,不仅仅是前端技术,还有参数传递。

干就完事了!

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

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

相关文章

天润融通「微藤大语言模型平台2.0」以知识驱动企业高速增长

8月23日&#xff0c;天润融通&#xff08;又称“天润云”,2167.HK&#xff09;&#xff0c;正式发布「微藤大语言模型平台2.0」。 “大模型企业知识企业知识工程”。 “不能有效记录和管理知识的企业是不能持续进步的。在企业的生产流程中&#xff0c;相比于其他场景&#xff0…

BigDecimal 工具类

import java.math.BigDecimal; import java.math.RoundingMode;/*** 简化BigDecimal计算的小工具类*/ public class BigDecimalUtil {/*** 默认除法运算精度*/private static final int DEF_DIV_SCALE 10;private BigDecimalUtil() {}/*** 提供精确的加法运算。** param v1 被…

【网络安全】防火墙知识点全面图解(二)

本系列文章包含&#xff1a; 【网络安全】防火墙知识点全面图解&#xff08;一&#xff09;【网络安全】防火墙知识点全面图解&#xff08;二&#xff09; 防火墙知识点全面图解&#xff08;二&#xff09; 21、路由器的访问控制列表是什么样的&#xff1f;22、防火墙的安全策…

情人节定制:HTML5 Canvas全屏七夕爱心表白特效

❤️ 前言 “这个世界乱糟糟的而你干干净净可以悬在我心上做太阳和月亮。”&#xff0c;七夕节表白日&#xff0c;你要错过吗&#xff1f;如果你言辞不善&#xff0c;羞于开口的话&#xff0c;可以使用 html5 canvas 制作浪漫的七夕爱心表白动画特效&#xff0c;全屏的爱心和…

Linux文本处理工具

Linux文本处理工具 一、cut ​ cut 工具用于从文本文件或标准输入中提取指定字段。它通常按列来切割文本内容。 ​ 示例&#xff1a; 假设有一个名为 data.txt 的文本文件包含以下内容&#xff1a; Alice 25 Bob 30 Charlie 28使用 cut 命令提取第一列&#xff08;名字&…

【无标题】idea 中 SpringBoot 点击运行没反应,按钮成灰色

问题描述 在使用 Spring Boot 开发项目时&#xff0c;可能会遇到一个问题&#xff1a;点击运行按钮后&#xff0c;控制台没有任何输出&#xff0c;项目界面也没有显示。这种情况可能是由多种原因导致的&#xff0c;本文将介绍一些常见的解决方法。 解决方法 首先看下Groovy插…

AndroidStudio升级后总是Read Time Out的解决办法

AndroidStudio升级后在gradle的时候总是Time out&#xff0c;遇到过多次&#xff0c;总结一下解决办法 1、gradle下载超时 在工程目录../gradle/wrapper/gradle-wrapper.properties中找到gradle版本的下载链接&#xff0c;如下图&#xff1a; 将其复制到迅雷里下载&#xff0…

⛳ Java 网络编程

目录 ⛳ Java 网络编程&#x1f3a8; 一、TCP / IP 协议&#x1f463; 二、IP 和 端口号&#x1f381; 三、TCP 网络层编程&#x1f3a8; 3.1、Socket⭐ 3.2、基于Socket的TCP编程 &#x1f3ed; 四、UDP网络编程&#x1f43e; 五、URL编程 ⛳ Java 网络编程 &#x1f3a8; 一…

JavaSE 数组

定义&#xff1a; int []arr; int arr[]; 初始化 // 完整格式 int arr[] new int[]{1, 2, 3}; // 简单格式 int arr[] {1, 2, 3}; 数组的元素访问、遍历 按照下标访问即可。数组的长度函数为 arr.length()。idea快速生成遍历的方法&#xff1a;数组名.fori 静态初始化 &a…

MySQL-Centos下MySQL5.7安装教程

MySQL安装教程 一&#xff0c;卸载MySQL二&#xff0c;安装MySQL三&#xff0c;mysql登录四&#xff0c;修改配置文件 一&#xff0c;卸载MySQL 1.如果你的机器上mysqld服务器还在运行&#xff0c;那么第一步就是要停掉服务。 systemctl stop mysqld;2.查看系统中安装的关于m…

智慧城市能实现嘛?数字孪生又在其中扮演什么角色?

数字孪生智慧城市是将数字孪生技术与城市智能化相结合的新兴概念&#xff0c;旨在通过实时数字模拟城市运行&#xff0c;优化城市管理与服务&#xff0c;创造更智能、高效、可持续的城市环境。 在智慧城市中&#xff0c;数字孪生技术可以实时收集、分析城市各个方面的数据&…

solidity0.8.0的应用案例13:数字签名及应用:NFT白名单

以太坊中的数字签名ECDSA,以及如何利用它发放NFT白名单 代码中的ECDSA库由OpenZeppelin的同名库简化而成。 数字签名 如果你用过opensea交易NFT,对签名就不会陌生。下图是小狐狸(metamask)钱包进行签名时弹出的窗口,它可以证明你拥有私钥的同时不需要对外公布私钥。 …

使用 SQLStudio 进行数据库管理并通过 Docker Compose 进行部署

在现代软件开发中&#xff0c;数据库管理是一个至关重要的环节。SQLStudio 是一个强大的工具&#xff0c;可以帮助开发人员轻松管理数据库&#xff0c;现在改名成SQLynx&#xff0c;我们用的是旧的镜像&#xff0c;本文还是用SQLStudio这个名称。同时&#xff0c;使用 Docker C…

【数据库】MySQL存储过程:提升数据库性能和操作效率的利器

在数据库管理系统中&#xff0c;存储过程是一种重要的数据库对象&#xff0c;它允许将一组复杂的SQL语句组合起来&#xff0c;形成一个独立的单元进行重复使用。存储过程可以极大地提高数据库的性能和操作效率&#xff0c;降低网络流量&#xff0c;减轻系统负载。本文将深入探讨…

服务器基础

基础 介绍 可以理解为企业级的电脑&#xff0c;比个人使用的电脑具备更强的配置、性能、可靠性及稳定性。设计工艺和器件全部采用企业级设计&#xff0c;保障7*24小时稳定运行。 演进历史 处理性能 外观 发展方向 分类 按外形分类 按高度分类 按应用分类 按综合能力分类…

css-选择器、常见样式、标签分类

CSS CSS简介 层叠样式表(英文全称&#xff1a;Cascading Style Sheets)是一种用来表现HTML&#xff08;标准通用标记语言的一个应用&#xff09;或XML&#xff08;标准通用标记语言的一个子集&#xff09;等文件样式的计算机语言。CSS不仅可以静态地修饰网页&#xff0c;还可…

ubuntu18.04复现yolo v8之CUDA与pytorch版本问题以及多CUDA版本安装及切换

最近在复现yolo v8的程序&#xff0c;特记录一下过程 环境&#xff1a;ubuntu18.04ros melodic 小知识&#xff1a;GPU并行计算能力高于CPU—B站UP主说的 Ubuntu可以安装多个版本的CUDA。如果某个程序的Pyorch需要不同版本的CUDA&#xff0c;不必删除之前的CUDA&#xff0c;…

选择排序:用C语言打造高效的排序算法

本篇博客会讲解如何使用C语言实现选择排序。 下面我来画图讲解选择排序的思路。 假设有一个数组&#xff0c;其初始状态如下&#xff0c;我们想把这个数组排成升序。 首先我们标明范围&#xff0c;即[begin, end]&#xff0c;一开始begin(b)和end(e)分别表示数组的第一个位置…

v-loading.fullscreen.lock

在Vue中&#xff0c;v-loading是一个自定义指令&#xff0c;用于显示加载状态的可复用指令。而v-loading.fullscreen.lock是v-loading指令的一种配置形式&#xff0c;用于在全屏加载时锁定页面。 通常&#xff0c;v-loading指令被用于在异步操作期间显示加载状态&#xff0c;以…

【数据结构】实现栈和队列

目录 一、栈1.栈的概念及结构&#xff08;1&#xff09;栈的概念&#xff08;2&#xff09;栈的结构 2.栈的实现&#xff08;1&#xff09;类型和函数的声明&#xff08;2&#xff09;初始化栈&#xff08;3&#xff09;销毁&#xff08;4&#xff09;入栈&#xff08;5&#x…