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

ops/2024/9/21 7:56:24/

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

实现功能:

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.ppmy.cn/ops/113684.html

相关文章

2024 新手指南:轻松掌握 Win10 的录屏操作

之前为了节约成本我们公司都采用录制软件操作都方式来为异地的同事进行远程操作培训的。所以我们尝试了不少的录屏工具,这里我就分享下win10怎么录屏的操作过程。 1.福昕录屏大师 链接:www.foxitsoftware.cn/REC/ 这款录屏工具是初学者的理想之选&…

OpenAI或于9月24日发布ChatGPT高级语音模式

🦉 AI新闻 🚀 OpenAI或于9月24日发布ChatGPT高级语音模式 摘要:科技媒体报道,OpenAI计划在9月24日进一步推广ChatGPT的高级语音模式,预计将正式发布。该模式于7月向部分ChatGPT Plus用户开放,提供更为真实…

茶思屋直播|TinyEngine+AI:聚焦主航道,在实践中探索低代码技术黑土地

低代码引擎使能开发者定制低代码平台。它是低代码平台的底座,提供可视化搭建页面等基础能力,既可以通过线上搭配组合,也可以通过cli创建个人工程进行二次开发,实时定制出自己的低代码平台。适用于多场景的低代码平台开发&#xff…

VM虚拟机使用的镜像文件下载

文章目录 Windows系统进入微软官网下载工具以Windows10为例下载镜像文件 Windows系统 进入微软官网下载工具 微软中国官网:https://www.microsoft.com/zh-cn/ 以Windows10为例下载镜像文件 选择下载的路径 开始下载 安装windows10操作系统出现Time out问题及解决办…

ssh 免密登陆服务器故障

在服务器上新建账户后,希望通过ssh免密或者通过证书登录系统,以提高服务器安全性。 基本流程都已经做完,生成密钥,将公钥内容复制到账户home目录中的.ssh目录下的authorized_keys 文件。同时修改sshd_config文件,禁止通…

监控系列之-Grafana面板展示及制作

一 Grafana设置添加数据源 1、设置Grafana中文显示 最后保存退出,数据源添加完毕 2、导入node_exporter主机监控面板 此处 有外网的情况下,直接输入对应面板的ID号,然后点击加载即可;无无外网的话,则考虑使用上传仪表…

HtmlRender - c++实现的html生成类

HtmlRender 在CppTinParser/render.hpp中定义和实现。 使用c实现的简易Html编辑类。 简介 目前,c有几个Html解析器,而少见便捷规范的html生成器,HtmlRender则提供了一个简单的、规范的html内容生成器。用c实现html内容生成器,…

Android CarrierConfig 配置问题的解决流程

开发步骤 确认代码路径 查看编译用的CarrierConfig APK在项目代码的path,一般是源码或者厂商定制的: packages/apps/CarrierConfig/vendor/mediatek/proprietary/packages/apps/CarrierConfig Note:一些overlay的方式是替换xml文件&#…