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.xdnf.cn/news/144764.html

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

相关文章

Instagram全面升级“青少年账号”保护措施,除了信息分类过滤,还应从根源加强内容审核

在持续多年的监管和诉讼压力下,作为社交网站的巨头,Instagram落实了“最严格的青少年用户保护法”。 Instagram 上所有未满 18 岁的用户都将被归为“青少年用户”,默认把账号设置为私密状态,自动实施多项防护措施,很多…

Vue3实战:使用 errorHandler 捕获全局错误

你好同学,我是沐爸,欢迎点赞、收藏、评论和关注。 在 Vue3 中,app.config.errorHandler 是一个错误处理器,用于为应用内抛出的未捕获错误指定一个全局处理函数,它接收三个参数:错误对象、触发该错误的组件…

什么品牌超声波清洗机质量好?四大绝佳超声波清洗机品牌推荐!

在快节奏的现代生活中,个人物品的清洁卫生显得至关重要。眼镜、珠宝饰品、手表乃至日常餐厨用具,这些频繁接触的物品极易累积污渍与细菌。拿眼镜为例,缺乏定期清洁会让油渍与尘埃积累,进而成为细菌的温床,靠近眼睛使用…

人脸识别系统+电插锁安装配置过程

一、适用场景 1、各住宅小区内,一个单元涉及多户,一楼安装公共的人脸识别门禁进行身份的认证。 2、某企业的职工住宅区,企业统一安装人脸识别门禁认证身份。 3、自建楼栋,分多间出租给住户时,每个住户配备电子钥匙存在…

GEE使用require函数调用自己的Js库

新建了一个repository,名为Lib 把我的地形校正的函数放了进去 在自己的代码中调用就用到这个路径,主要Lib后面用冒号

观《中国数据库前世今生》有感:从历史到未来的技术变迁

观《中国数据库前世今生》有感:从历史到未来的技术变迁 在数字化浪潮中,数据库技术作为信息化建设的核心,承载了时代发展的脉搏。观看了纪录片《中国数据库前世今生》后,我深深感受到了中国数据库技术从无到有、从追赶到引领的艰…

深度残差网络ResNet简介

【图书推荐】《PyTorch深度学习与企业级项目实战》-CSDN博客 《PyTorch深度学习与企业级项目实战(人工智能技术丛书)》(宋立桓,宋立林)【摘要 书评 试读】- 京东图书 (jd.com) 卷积神经网络经典模型架构简介-CSDN博客 深度残差网络&#xf…

10分钟搞清楚为什么Transformer中使用LayerNorm而不是BatchNorm

1. Norm(Normalization) 首先,LayerNorm和BatchNorm的Norm是Normalization的缩写,不是Norm-范数。 Normalization在统计学中一般翻译为归一化,还有类似的是Standardization,一般翻译成标准化。这两个概念有什么区别呢? 归一化是…

vue2 + moment 实现日历,并带有上个月和下个月日期的日历

在 Vue 2 中使用 moment 库绘制一个带有上个月和下个月日期的日历,可以通过以下步骤实现。这个日历将显示当前月份的天数,以及前一个月和下一个月的部分日期(通常为了让日历对齐为6行,每行7天)。 主要步骤&#xff1a…

海睿思ABI——不只是BI,更多的是数据和智能

在当今这个数据洪流席卷各行各业的数字化时代,企业BI的建设已不再是可选项,而是驱动企业转型升级、实现精细化运营的必由之路。传统BI通过临时数据集直连业务系统,仅能展示预设报表和仪表盘,难以集成异构数据源,适应业…

【数学二】函数概念、常用函数、函数四大性质

考试要求 1、理解函数的概念,掌握函数的表示法,并会建立应用问题的函数关系. 2、了解函数的有界性、单调性、周期性和奇偶性. 3、理解复合函数及分段函数的概念、了解反函数及隐函数的概念。 4、掌握基本初等函数的性质及其图形、了解初等函数的概念。…

SpringCloud从零开始简单搭建 - JDK17

文章目录 SpringCloud Nacos从零开始简单搭建 - JDK17一、创建父项目二、创建子项目三、集成Nacos四、集成nacos配置中心 SpringCloud Nacos从零开始简单搭建 - JDK17 环境要求:JDK17、Spring Boot3、maven。 那么,如何从零开始搭建一个 SpringCloud …

PyQGIS开发 3 基础功能开发

PyQGIS开发 3 基础功能开发 1 添加图层树与地图视图 1.1 添加控件 1.2 Python代码 from PyQt5.QtCore import QMimeData from qgis.PyQt.QtWidgets import QMainWindow from qgis._core import QgsMapLayer, QgsRasterLayer, QgsVectorLayer from qgis.core import QgsProje…

美联储降息引爆股市,标普500指数逼近历史新高

在美联储宣布大幅降息后,股市迎来了强劲反弹。投资者信心大增,此前他们就预期美联储会降息0.5个百分点。周四的股市涨幅让标普500指数接近历史收盘最高点。 周四,标普500指数有望刷新历史纪录,此前美联储的大幅降息为市场注入了活…

基于STM32的智能门禁系统(指纹、蓝牙、刷卡、OLED、电机)

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于STM32单片机,六个按键,分别代表指纹、蓝牙、刷卡的正确进门与错误进门; 比如第一个按键按下,表示指纹正确,OLED显示指纹正确&#x…

OpenHarmony(鸿蒙南向开发)——小型系统内核(LiteOS-A)【内核启动】

往期知识点记录: 鸿蒙(HarmonyOS)应用层开发(北向)知识点汇总 鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~ 子系统开发内核 轻量系统内核(LiteOS-M) 轻量系统内核&#…

faiss安装 (CPU版本)

faiss版本 faiss-v1.7.4 cd faiss-v1.7.4cmake -B build . -DBUILD_TESTINGOFF -DFAISS_ENABLE_GPUOFF -DFAISS_ENABLE_PYTHONOFFmake -C build -j faiss; 默认安装路径如下 -- Installing: /usr/local/lib64/libfaiss.a -- Installing: /usr/local/include/faiss…

跨境平台通用测评技巧:解锁Temu、亚马逊等平台的销量密码

在当今竞争激烈的跨境电商行业,测评补单虽被视为“公开的秘密”,但无论是消费者还是平台方对此普遍持有反感态度。对于新手店铺而言,若缺乏价格和运营等方面的绝对优势,要在市场中生存下去尤为困难。因此,合理使用测评…

深入探讨IDSIPS:信息安全的未来趋势与应用

引言 在信息技术飞速发展的今天,网络安全问题愈发突出。随着数据泄露、网络攻击等事件频发,企业和个人对信息安全的重视程度不断提高。IDSIPS(Intrusion Detection System and Intrusion Prevention System)作为信息安全领域的重…

PowerShell install 一键部署Oracle12c

Oracle12c前言 Oracle 12c是甲骨文公司推出的一款关系数据库管理系统,它引入了多项创新特性,如多租户架构、大数据处理和云部署,适用于企业级应用。以下是Oracle 12c的详细介绍: Oracle 12c的主要特点 高性能:通过多线程处理、自动优化等技术,提高了数据库的查询和处理…