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.hqwc.cn/news/598000.html

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

相关文章

LeetCode热题100:哈希

1.两数之和 题目链接:两数之和 题目描述:给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是,数…

【蓝桥杯-读数据】

蓝桥杯-读数据 P8598 [蓝桥杯 2013 省 AB] 错误票据 P8598 [蓝桥杯 2013 省 AB] 错误票据 这道题本身很简单&#xff0c;最大的难点在于读入数据。 #include<bits/stdc.h> using namespace std; #define int long long const int N 2e5 10; int a[N]; signed main()…

ArcGIS Pro怎么进行挖填方计算

在工程实施之前&#xff0c;我们需要充分利用地形&#xff0c;结合实际因素&#xff0c;通过挖填方计算项目的标高&#xff0c;以达到合理控制成本的目的&#xff0c;这里为大家介绍一下ArcGIS Pro中挖填方计算的方法&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的…

STM32F103C8T6-CAN

本文内容 HAL库下printf重定向解决问题&#xff1a;Keil下调试可以正常运行&#xff0c;而下载后运行不了CAN总线的回环测试&#xff0c;自发自收 printf重定向 实现printf重定向的目的是方便调试&#xff0c;通过UART查看打印的调试信息。 下面以STM32F103C8T6为例&#xf…

Linux Shell:`cat`命令

Linux Shell&#xff1a;cat命令 Linux 系统中的 cat 命令是一种多用途的工具&#xff0c;主要用于查看、创建、连接和追加文件内容。其名称来源于 concatenate 的缩写&#xff0c;意味着它可以用来连接文件内容到标准输出&#xff08;屏幕&#xff09;。在日常使用中&#xf…

FPGA + 图像处理(三)生成3x3像素矩阵

前言 生成NxN的像素矩阵是对图像进行各类滤波操作的基本前提&#xff0c;本文介绍一种通过bram生成3x3矩阵的方法。 程序 生成bram核 因为本文介绍的是基于bram生成的3x3像素矩阵&#xff0c;所以要先生成两个bram核&#xff0c;用于缓存前两行图像数据 在 IP catalog中选…

实现Hello Qt 程序

&#x1f40c;博主主页&#xff1a;&#x1f40c;​倔强的大蜗牛&#x1f40c;​ &#x1f4da;专栏分类&#xff1a;QT❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、使用 "按钮" 实现 1、纯代码方式实现 2、可视化操作实现 &#xff08;1&#xff09…

【Linux】进程控制详解

目录 前言 进程创建 认识fork 写时拷贝 再谈fork 进程终止 进程退出码 用代码来终止进程 常见的进程终止的方式 exit _exit 进程等待 进程等待的必要性 进程等待的方式 wait waitpid 详解status参数 详解option参数 前言 本文适合有一点基础的人看的&#…

神操作!微信批量自动加好友,轻松拓展人脉!

现如今&#xff0c;如何扩大自己的微信人脉&#xff0c;成为了许多人关心的问题。幸运的是&#xff0c;现在有一种神奇的操作&#xff0c;可以让你轻松实现批量自动加好友的目标&#xff01;那就是利用微信管理系统。 微信管理系统可以让你同时登录多个微信账号&#xff0c;同…

四月软件测试面经合集(持续更新)

四月软件测试面经合集 polelink面试&#xff08;一面过&#xff09;01 对于JMeter接口测试&#xff0c;如何做接口关联&#xff1f;接口关联的定义JMeter关联方法正则表达式介绍贪婪匹配和非贪婪匹配案例分析正则表达式提取器步骤 02 是否会写shell脚本&#xff0c;能对shell进…

vue广告悬浮框,页面来回移动,鼠标放上停止,离开移动

1.dom <div class"popup-dialog" id"popupDialog" mouseover"onMmouseover" mouseout"onMouseout"><p>vue广告悬浮</p></div>2.js mounted() {this.initPopup();},beforeDestory() {if (this.times) {clearIn…

Ceph分布式存储系统以及高可用原理

Ceph分布式存储系统以及高可用原理 1. Ceph原理和架构1.1 分布式存储系统抽象1.2 Ceph基本组件 2 Ceph中的策略层2.1 CRUSH进行数据分发和定位2.2 PG(Placement Group): 集群管理的基本单元2.3 PG的代理primary OSD2.4 轻量级的集群元数据ClusterMap2.5 对PG的罗辑分组&#xf…