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

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

实现功能:

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.rhkb.cn/news/427805.html

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

相关文章

table表格,让thead固定,tbody内容滚动,关键是都对齐的纯css写法

前言:哈喽,大家好,今天给大家分享今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏关注哦 &#x1f…

Postman如何测试WebSocket接口!

01、WebSocket 简介 WebSocket是一种在单个TCP连接上进行全双工通信的协议。 WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直…

【Linux 20】线程控制

文章目录 🌈 一、创建线程⭐ 1. 线程创建函数⭐ 2. 创建单线程⭐ 3. 给线程传参⭐ 4. 创建多线程⭐ 5. 获取线程 ID 🌈 二、终止线程⭐1. 使用 return 终止线程⭐ 2. 使用 pthread_exit 函数终止线程⭐ 3. 使用 pthread_cancel 函数终止线程 &#x1f30…

HTTP协议详解以及常见的状态码

HTTP协议的定义: HTTP(HyperText Transfer Protocol,超文本传输协议)是一种建立在TCP(传输控制协议)之上的无状态连接协议。它是互联网的基础协议之一,用于客户端与服务器之间的通信。HTTP规定…

【Python】练习:控制语句(二)第1关

第1关:分支结构基础实训 第一题第二题第三题第四题(※)第五题(※)第六题第七题 第一题 #第一题 for temp in [-280, -100, 0, 20, 120, 200]:#请在下面编写代码# ********** Begin ********** #if temp>-273.15:F9/…

如何选择适合客户运营团队的帮助中心搭建工具?8款工具盘点

在竞争激烈的商业环境中,客户运营团队需要高效、便捷的工具来搭建帮助中心,以提升客户服务质量和用户体验。选择合适的帮助中心搭建工具,不仅能提高团队工作效率,还能增强客户满意度和忠诚度。本文将为您盘点八款适合客户运营团队…

中间件安全(二)

本文仅作为学习参考使用,本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 前言: 前文链接:中间件安全(一) 本文主要讲解Couchdb数据库未授权越权漏洞(CVE-2017-12635)。 靶场链接:Vu…

爱普生相机SD卡格式化后数据恢复指南

我借了朋友的‌爱普生相机,想查看一下内存,哎呀,一不小心按错了,竟然执行了格式化操作,这可真是太让人郁闷了,这还有机会挽救数据吗?心塞,求帮助! 随着数码摄影的普及&am…

java框架

Oozie任务调度框架 Hue hadoop的WEB工具 seatunnel 数据同步框架 TIDB 大数据库支持事物 StreamX fink和spark的集成 OceanBase 阿里巴巴数据库 dooringx-lib、AntV 可视化H5工具 lowcode、Appsmith(推荐)、nocoBase 、Budibase、taskbuilder 低代…

【最经典的79个】软件测试面试题(内含答案)

001.软件的生命周期(prdctrm) 计划阶段(planning)-〉需求分析(requirement)-〉设计阶段(design)-〉编码(coding)->测试(testing)->运行与维护(running maintrnacne) 测试用例 用例编号 测试项目 测试标题 重要级别 预置条件 输入数据 执行步骤 预期结果 0002.问&…

Linux基础权限

Linux基础权限 shell的概念Linux基础权限Linux的两种用户Linux的权限管理权限认知权限设置权限掩码粘滞位 shell的概念 (shell)命令行解释器 的存在意义: 将用户的命令翻译给操作系统,然后返回OS的结果给用户;保护OS…

visionpro脚本

visionproToolBlock的脚本的优先级优于工具连线的优先级,一般是照着脚本的执行顺序进行执行对应的工具,最常用的是C#的高级脚本,C#的脚本如下分为5部分。 第一部分:主要是一些库的引用,对于有些类型不知道库的时候&…

云服务器开放端口

1. 控制台开放安全组 例如 阿里云 https://ecs.console.aliyun.com/ 网络与安全 > 安全组 新建或者选择一个安全组 入方向 > 手动添加 2. 服务器防火墙放行端口 在 CentOS 7 中可以使用 firewall-cmd 命令来开放指定端口号 16622。以下是具体步骤: 一、…

python库tenacity最后一次重试忽略异常,并返回None

from tenacity import retry, stop_after_attemptretry(stopstop_after_attempt(3), retry_error_callbacklambda x:None) def my_function():print(retry...)print(1/0)result my_function() print(result)效果如下

centos 7.9安装k8s

前言 Kubernetes单词来自于希腊语,含义是领航员,生产环境级别的容器编排技术,可实现容器的自动部署扩容以及管理。Kubernetes也称为K8S,其中8代表中间8个字符,是Google在2014年的开源的一个容器编排引擎技术&#xff…

Linux基础---07文件传输及解决yum安装失效的方法

Linux文件传输地图如下,先选取你所需的场景,若你是需要Linux和Linux之间传输文件就查看SCP工具即可。 一.下载网站文件 前提是有网: 检查网络是否畅通命令:ping www.baidu.com,若有持续的返回值就说明网络畅通。Ctr…

Docker笔记-容器数据卷

Docker笔记-容器数据卷 docker的理念将运行的环境打包形成容器运行,运行可以伴随容器,但是我们对数据的要求是希望持久化,容器 之间可以共享数据,Docker容器产生的数据,如果不通过docker commit生成新的镜像&#xf…

发送成绩的app或小程序推荐

老师们,新学期的第一次月考马上开始,是不是还在为如何高效、便捷地发布成绩而头疼呢?别担心,都2024年了,我们有更智能的方式来解决这个问题! 给大家安利一个超级实用的工具——易查分小程序。这个小程序简…

【Unity踩坑】UI Image的fillAmount不起作用

在游戏场景中,我们经常在界面上展示进度条,当然有各种形状的,线性的,长方形的,圆形,环形等等。 Unity中实现这种效果的话,最基本的方法说是改变Image的fillAmout属性。 如果你是初次使用UI Ima…

基于STM32的温度、电流、电压检测proteus仿真系统(OLED、DHT11、继电器、电机)

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于STM32F103C8T6 采用DHT11读取温度、滑动变阻器模拟读取电流、电压。 通过OLED屏幕显示,设置电流阈值为80,电流小阈值为50,电压阈值为60,温度阈值为30 随便哪个超过预祝,则继电器切断,LE…