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

news/2024/9/20 16:46:41 标签: 前端, vue.js, javascript

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

实现功能:

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.niftyadmin.cn/n/5667389.html

相关文章

vim的 配置文件

vim 的配置文件名是vimrc,共有两个,一个是公共的、所有用户的vimrc,一个是私有的、个人的.vimrc。个人的配置文件是隐藏的,不进行配置的话一般是没有这个文件的,需要自己创建.vimrc 公共配置文件位于 :/etc/vim/vimrc…

这样的大厂你喜欢么

原创不易,跪求小伙伴们点赞加关注,你们的点赞就是我的动力 前言 最近有很多同事向我诉苦,说实在是干不动了,每天都干到12点,甚至有的三级部门管理者经常要干到夜里一两点,第二天还要强装活力满满&#xff…

Docker UI强大之处?

DockerUI是一款由国内开发者打造的优秀Docker可视化管理工具。它拥有简洁直观的用户界面,使得Docker主机管理、集群管理和任务编排变得轻松简单。DockerUI不仅能展示资源利用率、系统信息和更新日志,还提供了镜像管理功能,帮助用户高效清理中…

科技修复记忆:轻松几步,旧照变清晰

在时间的长河中,旧照片承载着无数珍贵的记忆与故事。然而,随着岁月的流逝,这些照片往往变得模糊不清,色彩黯淡,令人惋惜。 幸运的是,随着科技的发展,我们有了多种方法来修复这些旧照片的画质&a…

EasyExcel的基本使用——Java导入Excel数据

使用EasyExcel导入Excel数据有两种方式 无论哪种方式我们都需要建立Excel表格和Java对象的绑定 首先我们需要根据Excel表头定义一个对应的类 excel表示例: 对应的类: 使用ExcelProperty将excel列名和字段名绑定,括号里面填列名 package co…

Vim使用技巧——第一章 Vim解决问题的方式

1、认识 . 命令 . 命令可以“重复上次修改”。 x 会删除光标下字符 u 撤销上次下修改 dd 删除当前行 >G 增加从当前行到文档末尾的缩进层级 . 命令是一个微型的宏 2、不要自我重复 对于在行尾添加内容的常见操作,如添加分号,vim提供了合并操作…

25届计算机专业毕设选题推荐-基于python的二手电子设备交易平台【源码+文档+讲解】

💖🔥作者主页:毕设木哥 精彩专栏推荐订阅:在 下方专栏👇🏻👇🏻👇🏻👇🏻 实战项目 文章目录 实战项目 一、基于python的二手电子设备交…

vi | vim基本使用

vim三模式:① 输入模式 ②命令模式 ③末行模式(编辑模式) vim四模式:① 输入模式 ②命令模式 ③末行模式(编辑模式) ④V模式 一、命令模式进入输入模式方法: 二、命令模式基…