vue前端数据字典渲染数据

最新推荐文章于 2024-05-13 01:41:27 发布

￥兔似锦

最新推荐文章于 2024-05-13 01:41:27 发布

阅读量2.3k

点赞数 2

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_44849938/article/details/124251175

版权

文章目录

前言
一、前端为什么会有数据字典
二、展示效果
代码展示
源码地址
总结

前言

提示：分享本次博客内容的缘由：

前天一个小伙伴遇到前端数据字典渲染的问题，于是我就写了一个demo仅供参考，来到自己的博客记录一波。

提示：以下是本篇文章正文内容，下面案例可供参考

一、前端为什么会有数据字典

示例：有时候我们的后端小伙伴可能不太想去处理数据格式，因为某些字段存在数据库字段里是以1，2,3这种格式，但是我们前端看到的可能是张三，李四，王五，这时候想实现这种效果这有两个办法，一个是后端去做数据处理给你在res里面给你返回回来，要不就是前端去处理数据给转换过来，

二、展示效果

在这里插入图片描述

代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
	</head>
	<body>
		<div id="app">

			<h2>
				后端返回数据
			</h2>

			<ul>
				<li>
					{{tableData.dict_pay_mode}}
				</li>

				<li>
					{{tableData.sex}}
				</li>
			</ul>

			<hr/>

			<h2>
				前端字典处理后数据
			</h2>

			<ul>
				<li>
					{{tableNewData.dict_pay_mode}}
				</li>

				<li>
					{{tableNewData.sex}}
				</li>
			</ul>

		</div>
	</body>
	<script src="/js/vue.js"></script>
	<script type="text/javascript">

		var app = new Vue({
			el:"#app",
			data:{

				//模拟数据字典
				JSONOBJECT:{
					dict_pay_mode: [{
							value: "1",
							label: "保税区"
						}, {
							value: "2",
							label: "驻厂监管"
						}, {
							value: "3",
							label: "\t保税工厂"
						}, {
							value: "4",
							label: "特殊行业"
						}, {
							value: "5",
							label: "保税维修"
					}],
					sex:[{
						value: "1",
						label: "男"
					},{
						value: "2",
						label: "女"
					}]

				},

				//模拟后端数据返回
				res:{
					code:200,
					data:{
						dict_pay_mode:1,
						sex:2
					}
				},

				//表格数据
				tableData:{

				},
				//字典处理后的新数据
				tableNewData:{

				}





			},
			methods:{

				getData(){
					this.tableData = this.res.data;  //模拟ajax请求数据赋值

					let keys = [];
					for (var key in this.tableData) {
					　　keys.push(key);
					}

					for(let i = 0 ;i<keys.length ;i++) {
						let obj = {};
						obj[keys[i]] = this.tableData[keys[i]];
						this.tableNewData[[keys[i]]] = this.CodeToText(obj,this.JSONOBJECT);
					}
					console.log(this.tableNewData)
				},

				//中文转code
				TextToCode(obj,json){

				},

				//code转中文
				CodeToText(obj,json){

					let text = "";  //返回的内容text

					let objKeys = [];

					for (var key in obj) {
						objKeys.push(key);
					}

					let keys = [];
					for (var key in json) {
					　　keys.push(key);
					}

					objKeys.forEach(el=>{
						keys.forEach(element => {
							if(el == element){
								json[element].forEach(item=>{
									if(item.value == obj[el]){
										text = item.label;
										return;
									}
								})
								return;
							}
						});
					})
					return text;
				},
			},
			created() {
				this.getData();
			},
			mounted() {
			},
		})
	</script>
</html>