后台查到的字典值翻译

最新推荐文章于 2025-10-21 19:43:30 发布

原创最新推荐文章于 2025-10-21 19:43:30 发布 · 707 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

JS 专栏收录该内容

18 篇文章

订阅专栏

本文探讨了在项目开发中如何利用字典数据来简化前端显示，通过数据库管理固定内容，实现实时翻译并保持代码灵活性。通过示例展示了获取字典值并转化为用户友好的汉字的过程。

项目中通常会把一些选项或其他固定内容统一管理到数据库中，称作字典数据，前后端交互存储的是字典的值（如：1、2、3、Y、N等），而前端显示的是字典的翻译（如：男、女、是、否等），这就需要在一些展示性的位置由前端根据获取的值翻译成汉字方便用户阅读。
另有一好处是如果值发生了变动，不需要修改前端代码，如1对应的翻译男要更改成女，可以直接变动数据库中的数据。

// 根据字典key值输出对应的value值
dictList为通过后端获取到的字典数据，格式为
[
	{
	dictValue:'男',
	dictKey:0
	},{
	dictValue:'女',
	dictKey:1
	}
	...
]

//JS
getDictValue(dictKey, dictList) {
	let str = '';
	dictList.forEach(e => {
		if (e.dictValue == dictKey) {
			str = e.dictLabel;
		}
	})
	return str;
}

//HTML使用
<view class="">{{ getDictValue(list.paType,faList) }}</view>