vue2中字符串动态拼接字段给到接口

news2024/9/20 17:04:31

【设计初衷是用户可根据给定的字段进行准确描述】

实现功能:

1. 文本域内容串动态配置字段,以$ {英文}拼接格式给到接口。
(传参如:$ {heat_status_code}正常,$ {wdy_temp}也正常!)
2. 编辑时根据接口返回的$ {英文}去匹配显示对应的中文到页面。
(页面显示如:$ {供暖状态} 正常,${室温}也正常!)

实现效果图:
在这里插入图片描述

关键代码-对表单内容串格式变换

methods: {
	 /***
     * 页面显示格式(中文)与提交格式(英文)互换
     * 参数alarmDesc 说明内容(会接受到两种格式:①页面操作时表单中的内容:${供暖状态}正常,${室温}也正常! ②后端详情接口给到的:${heat_status_code}正常,${wdy_temp}也正常!)
     * 参数flag 为true时传来的是中文,匹配{中文}替换为{英文},主要用于页面显示;为false时传来的是英文,匹配{英文}替换为{中文},主要用于接口传参
     */
    replaceKeysWithVals(alarmDesc, flag) {
      // this.keyOptions 为说明参数字段(动态的),里面字段key为中文, val为对应的英文(如 key: 供暖状态,val: heat_status_code)
      return this.keyOptions.reduce((desc, { key, val }) => {
        const regex = new RegExp(`\\{${flag ? key : val}\\}`, "g");
        return desc.replace(regex, `{${flag ? val : key}}`);
      }, alarmDesc);
    },
}

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

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

相关文章

Nginx从入门到入土(四):基于Nginx负载均衡策略

软负载和硬负载的概念前文提起过,那接下来我们便讲讲什么是负载均衡。 前言 Nginx负载均衡解决的是高并发的问题。 定义: 负载均衡(Load Balancing)是一种技术策略,它旨在将工作负载(如网络流量、计算任…

react之jsx基础(2)高频使用场景

文章目录 1. **组件定义**2. **条件渲染**3. **列表渲染**4. **事件处理**5. **嵌套组件**6. **表单处理**7. **样式应用**8. **处理子组件** 在 React 中,JSX 的使用是非常广泛和高频的。以下是一些常见的高频使用场景及其示例,帮助你更好地理解 JSX 的…

Python基于flask框架的智能停车场车位系统 数据可视化分析系统fyfc81

目录 技术栈和环境说明解决的思路具体实现截图系统设计python语言django框架介绍flask框架介绍性能/安全/负载方面可行性分析论证python-flask核心代码部分展示python-django核心代码部分展示技术路线操作可行性详细视频演示源码获取 技术栈和环境说明 结合用户的使用需求&…

我在高职教STM32——准备HAL库工程模板(2)

新学期已开始,又要给学生上 STM32 嵌入式课程了。这课上了多年了,一直用的都是标准库来开发,已经驾轻就熟了。人就是这样,有了自己熟悉的舒适圈,就很难做出改变,老师上课也是如此,排斥新课和不熟悉的内容。显然,STM32 的开发,HAL 库已是主流,自己其实也在使用,只不过…

基于SpringBoot+Vue的商场停车场管理系统

作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSpringBootVueMySQL的…

MeterSphere技术分享:UI自动化测试的必要性与解决方案

UI自动化测试体系的建设价值遵循测试金字塔模型,该模型建议测试人员在不同层次上编写和执行测试。UI测试需要编写和设计测试脚本、执行完整的应用程序,并模拟用户与应用程序交互,因此UI测试的测试速度相对较慢。但是UI测试的业务覆盖很高&…

【STL】stack,deque,queue 基础,应用与操作

stack 1.stack相关介绍 stack(栈) 栈是一种后进先出(LIFO, Last In First Out)的数据结构,意味着最后插入的数据最先被移除。C 中的栈是通过容器适配器实现的,底层默认使用 deque(双端队列&am…

数字电子技术-数值比较器

目录 数值比较器 1、1位二进制数值比较器 多位数值比较器 4位数值比较器74LS85(TTL型) 74LS85数值比较器的使用说明 数值比较器 Digital Comparator,又称数字比较器,用以对两个数字的大小或是否相等进行比较的逻辑电路。 1、1位二进制数值比较器 A和B只能取值…

硬盘数据恢复必备:4 款强大硬盘数据恢复软件推荐!

在数字化的时代,我们的生活和工作越来越离不开电脑,而硬盘作为重要的数据存储设备,一旦出现数据丢失的情况,往往会给我们带来极大的困扰。别担心,今天就为大家推荐四款强大的硬盘数据恢复软件,帮助你轻松找…

六西格玛绿带培训多少钱?从授“鱼”到授“渔”

六西格玛作为一种全球公认的质量管理方法,其影响力日益扩大,而六西格玛绿带培训作为这一体系中的关键环节,更是吸引了众多希望在职场上脱颖而出的专业人士。本文,深圳天行健企业管理咨询公司将从多个维度深入探讨“六西格玛绿带培…

巴菲特的长期投资策略:新投资者实现财务自由的启示

在投资界,沃伦巴菲特的名字几乎无人不晓。作为伯克希尔哈撒韦公司的董事长和首席执行官,巴菲特以其卓越的投资智慧和长期价值增长策略,成为了全球投资者的偶像。巴菲特的成功不仅仅是因为他的财富,更在于他对投资的深刻理解和对财…

Linux嵌入式驱动开发指南(速记版)---Linux基础篇

第一章 Ubuntu系统入门 1.1 Linux磁盘管理 1.1.1 Linux磁盘管理基本概念 关键词: Linux 磁盘管理 挂载点 /etc/fstab文件 分区 ls /dev/sd* 联系描述: Linux 磁盘管理体系通过“挂载点”概念替代了 Windows 中的“分区”概念,将硬盘部分以文…

如何保养净水器

俗话说,“三分用,七分养”,这句话道出了家电这类消费品使用寿命的秘诀。家电的长久运行并不仅仅依赖于其出厂时的品质,更与我们日常的维护保养息息相关。虽然行业标准或制造商通常会规定家电的推荐使用年限,但在许多家…

【计算机网络】传输层协议UDP

目录 一、端口号1.1 端口号范围划分1.2 认识知名端口号 二、UDP协议2.1 UDP协议端格式2.2 UDP的特点2.3 UDP的缓冲区2.4 UDP使用注意事项2.5 基于UDP的应用层协议 一、端口号 传输层协议负责数据的传输,从发送端到接收端。端口号标识一个主机上进行通信的不同的应用…

Go语言的io输入输出流

Go语言的输入输出流不如其他语言那么直观,由于是通过实现接口方法的隐式继承所以比较抽象,今天具体介绍一下go语言的输入输出流。 go语言输入输出在io库中,使用Reader接口,如下: type Reader interface {Read(p []by…

windows下用cmake编译腾讯云的对象存储COS的XML C++SDK

首先在腾讯云官网上下载sdk,网址及官方说明文档如下: 对象存储 快速入门-SDK 文档-文档中心-腾讯云 我下载解压之后的路径如下图: 下载完后就要编译了。 1.下载VS,我的开发环境是 visual studio 2019 2. 下载CMake&#xff…

UNRAID系统忘记密码解决办法

前言 unraid系统自己通过命令修改密码以后,怎么也进不去了。 这次带来如何重置密码 操作

1-2.Jetpack 之 Navigation 跳转编码模板

一、Navigation 1、Navigation 概述 Navigation 是 Jetpack 中的一个重要成员,它主要是结合导航图(Navigation Graph)来控制和简化 Fragment 之间的导航,即往哪里走,该怎么走 2、Navigate 引入 在模块级 build.gra…

《关节机械臂:智能仓库的高效助手》

关节机械臂作为一种高度精密的机器设备,在现代制造工厂的智能仓库系统中发挥着至关重要的作用。其设计初衷便是精准地模拟人类手臂在订单拣选操作中的各种运动,以实现高效、准确的物流作业。 这些多功能的机器人由多个关节巧妙组合而成,通常拥…