RuoYi-Vue若依框架-vue前端给对象添加字段

处理两个字段的时候有需求都要显示在下拉框的同一行,这里有两种解决方案,一是后端在实体类添加一个对象,加注解数据库忽略处理,在接口处拼接并传给前端,二是在前端获取的数据数组内为每个对象都添加一个字段,遍历数组,将字段值写入,再让页面显示,在表格中显示的时候可以用插槽,写一个方法,传入当前行的数据id查找我要显示的值,这里写一下第二种方法记录一下,求助说是第一种更符合常规以及所学,但是当时就猛着第二种去了,不写完又感觉缺一块,完结了记录一下吧。

常规写一个查询方法,在获取到全部数据放入一个全局变量内,我遍历了这个全局变量,拿到我所需要的两个字段并把他们拼接起来,用一个声明的变量接收,接下来就说添加那个字段

遍历的单个数据对象.添加的字段 = 声明的变量

对应我的代码则是

    // 查询产品规格列表getSpec() {specListSelect().then((response) => {this.specOptions = response.data;this.specOptions.forEach((item) => {const wide = item.wide;const weight = item.weight;const specString = `幅宽${wide},克重${weight}`;// 在 item 对象中添加 specString 字段item.specString = specString;// 在 specStrings 对象中建立 specificationsId 和 specString 的映射  this.$set(this.specStrings, item.specificationsId, specString);  });});},

这段,加上就有这个数据字段了

          // 在 item 对象中添加 specString 字段item.specString = specString;

在这里插入图片描述
而我的数据库中则没有这个字段
在这里插入图片描述
在前端也可以显示
在这里插入图片描述
在这里插入图片描述
记录一下,如果有其他方法也可以说说分享一下

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

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

相关文章

Linux CPU利用率

Linux CPU利用率 在线上服务器观察线上服务运行状态的时候,绝大多数人都是喜欢先用 top 命令看看当前系统的整体 cpu 利用率。例如,随手拿来的一台机器,top 命令显示的利用率信息如下 这个输出结果说简单也简单,说复杂也不是那么…

猫头虎博主深度探索:Amazon Q——2023 re:Invent 大会的 AI 革新之星

摘要 大家好,我是猫头虎博主!今天,我要带大家深入了解2023年 re:Invent 大会上发布的一款革命性产品——Amazon Q。让我们一起探索这个引领未来工作方式的新型工具吧! 引言 在2023年的 re:Invent 大会上,亚马逊云科…

✌2024/4/4—力扣—盛最多水的容器

代码实现: 方法一:暴力解法——遍历左右边,找出所有面积,取最大值——超时 #define min(a, b) ((a) > (b) ? (b) : (a)) #define max(a, b) ((a) > (b) ? (a) : (b))int maxArea(int *height, int heightSize) {int ans …

SQL注入sqli_labs靶场第五、六题

第五题 根据报错信息,判断为单引号注入 没有发现回显点 方法:布尔盲注(太耗时,不推荐使用) 1)猜解数据库名字:(所有ASCII码值范围:0~127) ?id1 and length…

论文笔记:面向实体的多模态对齐与融合网络假新闻检测

整理了2022TMM期刊 Entity-Oriented Multi-Modal Alignment and Fusion Network for Fake News Detection)论文的阅读笔记 背景模型改进的动态路由算法Cross-Modal Fusion 实验 背景 现有的假新闻方法对多模态特征进行各种跨模态交互和融合,在检测常见假…

使用Ollama在本地运行AI大模型gemma

1.下载: https://github.com/ollama/ollama/releases 2.配置环境变量 我的电脑-右键-属性-系统-高级系统设置-环境变量-【系统环境变量】新建 变量名:OLLAMA_MODELS (固定变量名) 变量值:E:\Ollama\Lib &#xff0…

Unity自定义icon

Unity自定义icon 1. 新建文件夹 OfficeFabricIconSet2. 新建Iconset3. 新建子文件夹Textures并添加icon图片4. 向iconset添加Quad Icons5. 最终效果 教程来源处: https://365xr.blog/build-your-own-button-icon-set-for-microsoft-hololens-2-apps-with-mrtk-using…

seo调优

SEO 网站地图:sitemap.xmlrobots.txtxxx.com/www.xxx.com 解析到服务器,xxx.com 301 到 www.xxx.comhttps百度站点管理标题描述关键词标签语义化内链外链死链链接html结尾友情链接前端架构 注意:已收录链接,禁止改变链接地址 ro…

Spring boot 入门 ---(一),2024年最新java进阶训练营

spring-snapshots http://repo.spring.io/snapshot spring-milestones http://repo.spring.io/milestone spring-boot-starter-parent是使用Spring Boot的一种不错的方式,但它 并不总是最合适的。有时你可能需要继承一个不同的父POM,或只是不喜欢我…

Linux网络基础 (三) —— Socket

文章目录 Socket 编程基本概念Socket背景Socket 为了解决什么问题 socketsockaddr结构sockaddrsockaddr_insockaddr 和 sockaddr_in 的关系sockaddr_un 示例代码 🎖 博主的CSDN主页:Ryan.Alaskan Malamute 📜 博主的代码仓库主页 [ Gitee ]&…

AMRT3D数字孪生引擎

产品概述 AMRT3D引擎是由眸瑞网络科技自主研发、拥有完全自主知识产权的一款全球首款轻量化3D图形引擎,引擎以核心的轻量化技术及AMRT轻量格式为支柱,专为数字孪生项目开发打造。 AMRT3D引擎提供一整套完善的数字孪生解决方案,在数据处理方…

three.js尝试渲染gbl模型成功!(三)

参照教程:https://cloud.tencent.com/developer/article/2276766?areaSource102001.5&traceId88k805RaN_gYngNdKvALJ (作者:九仞山) 通过最近两天查three.js入门教程了解到 这玩应支持包括 .obj、.gltf等类型的模型结构。 g…

国产低代码工具,轻松搞定数据迁移

在日常的业务系统升级或者数据维护过程中,数据迁移是各个企业用户不得不面临的问题,尤其是数据迁移过程中要保障数据完整性、统一性和及时性,同时也需要注意源数据中的数据质量问题,比如缺失、无效、错误等问题,需要在…

windows版本-idea中下载的java版本在哪

1、点击idea的file-projectStructure 进入: 通过电脑目录进入该目录 找到bin目录,copy该目录地址 copy下来之后设置到系统环境变量中

synchronized 锁升级过程

synchronized 锁升级过程 Java中的synchronized锁升级过程是JVM为了提高并发性能而引入的一种优化策略,它在JDK 1.6及更高版本中得到了显著的改进。以下是synchronized锁从无锁状态到偏向锁、轻量级锁直至重量级锁的详细升级过程: 无锁状态:…

QT学习day4

widget.h #define WIDGET_H #include <QWidget> #include <QTime>//时间类 #include <QTimerEvent>//定时器类 #include <QPushButton>//按钮类 #include <QTextToSpeech>//语音播报 QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_E…

逆向案例十八——webpack逆向红人点集登录密码

网址链接&#xff1a;红人点集 密码登录&#xff0c;获取数据包&#xff1a; 发现pwd和sig两个加密参数&#xff0c;开始跟栈调试 点击第一个&#xff0c;在send处打上断点&#xff0c;再点击登录。 进入异步栈&#xff0c;r.requests 释放之前的断点&#xff0c;打上断点 &a…

【linux】基础IO(四)

在上一篇基础IO中我们主要讲述了文件再磁盘中的存储&#xff0c;当然我们说的也都只是预备知识&#xff0c;为这一篇的文件系统进行铺垫。 目录 搭文件系统的架子&#xff1a;填补细节&#xff1a;inode&#xff1a;datablock[]: 更上层的理解&#xff1a; 搭文件系统的架子&a…

实验1 eNSP安装与使用

实验1 eNSP安装与使用 一、 原理描述二、 实验目的三、 实验内容四、 实验步骤1.下载并安装eNSP2.eNSP软件界面3.搭建并运行网络拓扑4. Wireshark 捕获分组并分析 一、 原理描述 eNSP&#xff08;Enterprise Network Simulation Platform&#xff09;是由华为提供的免费网络模…

【PDF-XSS攻击】Java项目-上传文件-解决PDF文件XSS攻击

文章目录 背景解决pdfbox依赖控制器代码PdfUtils工具类 验证最后源码参考 背景 上传xss-pdf造成存储型xss因为在浏览器直接预览的PDF&#xff0c;而不是预览&#xff0c;所以安全部门认为会有XSS漏洞 解决 安全部门修复建议 1、根据白名单的标签和属性对数据进行过滤&#…