当前位置：首页 > article >正文

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

article 2024/9/20 16:37:22

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

实现功能：

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);
    },
}