vue中前端数据字典格式化的简单实现

最新推荐文章于 2024-10-06 18:10:12 发布

玉之之

最新推荐文章于 2024-10-06 18:10:12 发布

阅读量1.2k

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_45645324/article/details/125522120

版权

本文介绍了如何在Vue.js应用中实现前端数据字典的格式化，通过使用自定义的`forStatus`方法根据不同的code值返回对应的汉字描述，避免了大量if语句，采用更简洁的switch语句进行状态映射。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图，目前需要将code转化为汉字

再对应所需要更改的表头上加上 :formatter="forstatus" 其中forstatus为自定义替换的方法

//过滤流转状态

forStatus(row,column,cellValue,index){

// if(cellValue === '1'){

// return "流转中"

// } else if(cellValue === '2'){

// return "流转完"

// } else if(cellValue === '3'){

// return "阅文库"

// } else if(cellValue === '4'){

// return "从本地引入资料"

// }

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

玉之之

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue 实现数据字典列表功能

实践求真知

10-12

5091

一后端代码 1 接口 public interface DictService extends IService<Dict> { // 根据数据id查询子数据列表 List<Dict> findChlidData(Long id); } 2 接口实现 @Service public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictServic.

vue 字典配置_笔记: SpringBoot + VUE实现数据字典展示功能

weixin_39847732的博客

12-22

1853

最近一直在写前端,写得我贼难受,从能看懂一些基础的代码到整个前端框架撸下来鬼知道我经历了啥(；´д｀)ゞ项目中所用到的下拉菜单的值全部都是有数据库中的数据字典表来提供的,显示给用户的是的清晰的意思,但是很多实体类中保存的数据都只是"1"或者"0"下拉菜单部分渲染v-for="(v, i) in dictionary.flag":label="v.dicttypeName":value="v.dic...

参与评论您还未登录，请先登录后发表或查看评论

数据字典整合vue

chaojiyingxiong的博客

01-22

3279

创建数据库，表中包含id，与parent_id，parent_id表示属于哪个id下的层级关系代码中实体类添加字段 @ApiModelProperty(value = "是否包含子节点") @TableField(exist = false) //表中不包含的列 private boolean hasChildren; 控制层添加查询请求 //根据数据id查询子数据列表 @ApiOperation(value = "根据数据id查询子数据列表") @GetMapping("findC

使用VUE自定义组件封装数据字典实战

学海无涯，行者无疆

12-12

4330

照惯例，先交待下背景，从真实需求出发，讲述设计思路和实现方式。软件系统中，会有一些成组的常量值，来描述业务实体的属性，如性别、证件类型、审批状态等。我们通常称之为数据字典，作为系统后台管理的一个独立功能，来维护字典类型以及对应的字典值。后端功能和实现都比较简单，没什么好说的，今天重点要说的是前端的封装。对于数据字典，前端展现往往有三种常用的形式，下拉列表、单选按钮组和复选框组，其中，最常用是下拉列表，这里就以下拉列表的实现为例来说明，其他两种类似，不重复描述。技术栈采用的还是vue2.0，UI组件库使用e

vue前端数据字典渲染数据

weixin_44849938的博客

04-18

2656

vue前端数据字典渲染数据

avue-crud-数据字典（网络-dicUrl:返回数据格式data:）

02-26

"avue-crud-数据字典（网络-dicUrl:返回数据格式data:）"涉及的知识点包括：avue框架的使用、CRUD操作、数据字典的概念、动态获取数据字典的网络请求以及返回的数据格式，以及初始化环境配置文件在项目中的作用和...

vue实战指南 vue中引用json数据的方法

10-06

2526

例如，可以在项目启动时加载必要的配置信息，或者在组件内部引用静态数据，减少不必要的HTTP请求，从而优化用户体验。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。通过Vuex，可以在多个组件之间共享JSON数据，保持数据的一致性和可预测性。在SPA（单页应用）中，可以考虑在路由导航之前预加载必要的JSON数据，以减少用户的等待时间。无论使用哪种方式获取JSON数据，都应该加入适当的错误处理机制，确保即使在请求失败的情况下也能给出友好的用户反馈。

Vue3数据交互axios

weixin_44201223的博客

05-22

484

前端中的异步编程技术，类似Java中的多线程+线程结果回调！Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

若依 Vue3 前端分离 3.8.8 版中生成的前端代码中关于下拉框只有下拉箭头的问题

疯狂的格式化的博客

07-05

577

若依 Vue 前端分离 3.8.8 版中生成的前端代码中关于下拉框只有下拉箭头的问题。已解决！

vue-数据字典的使用

qq_42243957的博客

09-11

5675

Vue & Element前端项目中的字典列表显示处理

HfswCoder的博客

09-16

1110

可以将字典数据定义为一个JavaScript对象，其中键表示字典项的值，值表示字典项的显示文本。通过定义字典数据、创建处理方法，并在组件中使用这些方法，我们能够将字典项的值转换为对应的显示文本，从而实现了更友好的用户界面。在Vue和Element前端项目中，经常会遇到需要显示字典列表的情况，例如性别、状态、类型等等。在处理这些字典列表时，我们需要对数据进行适当的处理和展示，以便用户能够直观地理解和操作。字典数据中查找对应的显示文本。该方法接收一个参数，即字典项的值，然后返回对应的显示文本。

vue中字典的使用

qq_24441205的博客

12-06

1297

【代码】vue中字典的使用。

vue+element 字典表类型转换(解决复现的时候没有数据)

weixin_49393290的博客

11-07

994

<el-table-column prop="leftKey" align="center" width="210" label="包装物" > <template slot-scope="scope"> <!-- &l...

【vue 】dic_data 数据字典

Write less，do more

01-25

1212

<template> <el-main> <h1>数据字典</h1> <div style="overflow:hidden"> <div style="float:right"> <el-button type="primary" size="small" @click="showDialog('add')">新增字典</el-button> &lt

若依vue（前后端分离版本）前端使用字典

mind_me的博客

03-21

3543

若依前后端分离版本前端使用数据字典

Vue+Element 将常用的数据字典封装成配置文件

fyydashen的博客

12-23

1053

将常用的数据字典封装成配置文件(devicetype.js)，代码如下： // 数据显示时使用 export const deviceType = { 11: "服务器", 12: "数据库", 13: "网络设备", 14: "企业应用", 15: "打印机", 16: "UPS", 17: "PC终端", 19: "虚拟设备" } // 数据搜索传参时使用 export const deviceSearch = [{

在Vue项目中，关于服务端请求的数据字典（字典值）存放vuex

指尖笑

11-03

7522

1、问题描述在Vue或React项目中经常会遇到比如下拉框的数据字典之类的，都是每次在使用的时候实时像服务端请求还是请求一次后将数据放在Vuex还是放在localStorage之类的地方的？如果字典值数据量比较大的话会不会对前端造成负担？项目中的页面经常会和数据字典的值进行查询，一个一个去用ajax去请求，无疑很浪费时间。 2、理解vuex的五个核心概念 state // 状态树，基本数据定义, 类似组件中的data getter // 理解为store中的计算属性，类似组件中的comp...

Vue字典配置_全局字典数据获取、快速转义

weixin_46845368的博客

10-06

3584

Vue.js使用VueEasyDict统一管理静态、接口字典数据，支持快速转义、原始匹配对象获取

vue2,vue3数据字典获取及回显

一路走一路看，一边哭一边笑

07-11

8168

数据字典获取值，回显值

Vue+SpringBoot实现多功能管理系统与数据字典模板

7. 数据字典：数据字典是关于数据的信息集合，记录了系统中数据的定义、格式、类型、来源等详细信息。数据字典对于理解和使用数据非常有帮助，特别是在复杂系统中，它有助于维护数据的一致性和准确性。本系统中的...