vue + element-ui 项目详情页面显示字典的值？

于 2024-03-09 11:52:38 发布
阅读量470 收藏 7
点赞数 7
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/missbelover/article/details/136580248
版权

配置的数据字典，label和 value 是两个不同的值，项目的详情页面中如何回显字典的label 值？

通过 <dict-tag/> 标签进行回显
<dict-tag  class="tag-style" :options="dict.type.rcpc_enterprise_type" :value="form.seType" />
今天星期八
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于spring-boot+vuejs+element-ui的新闻发布管理系统源码+项目说明.zip
01-08
【资源说明】 1、基于spring-boot+vuejs+element-ui的新闻发布管理系统源码+项目说明.zip 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。 基于spring-boot+vuejs+element-ui的新闻发布管理系统源码+项目说明.zip <h1 style="text-align: center">EL-NEWS新闻发布管理系统</h1> <div style="text-align: center"> 项目简介 一个基于 Spring Boot 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue、eladmin的新闻发布管理系统 **初始账号密码：** `admin / 123456` #### 主要特性 - 使用最新技术栈，社区资源丰富。 - 高效率开发，代码生成器可一键生成前后端代码 - 支持数据字典，可方便地对一些状态进行管理 - 支持接口限流，避免恶意请求导致服务层压力过大 - 支持接口级别的功能权限与数据权限，可自定义操作 - 自定义权限注解与匿名接口注解，可快速对接口拦截与放行 - 对一些常用地前端组件封装：表格数据请求、数据字典等 - 前后端统一异常拦截处理，统一输出异常，避免繁琐的判断 - 支持在线用户管理与服务器性能监控，支持限制单用户登录 - 支持运维管理，可方便地对远程服务器的应用进行部署与管理 #### 系统功能 - 用户管理：提供用户的相关配置，新增用户后，默认密码为123456 - 角色管理：对权限与菜单进行分配，可根据部门设置角色的数据权限 - 菜单管理：已实现菜单动态路由，后端可配置化，支持多级菜单 - 部门管理：可配置系统组织架构，树形表格展示 - 岗位管理：配置各个部门的职位 - 字典管理：可维护常用一些固定的数据，如：状态，性别等 - 系统日志：记录用户操作日志与异常日志，方便开发人员定位排错 - SQL监控：采用druid 监控数据库访问性能，默认用户名admin，密码123456 - 定时任务：整合Quartz做定时任务，加入任务日志，任务运行情况一目了然 - 代码生成：高灵活度生成前后端代码，减少大量重复的工作任务 - 邮件工具：配合富文本，发送html格式的邮件 - 七牛云存储：可同步七牛云存储的数据到系统，无需登录七牛云直接操作云数据 - 支付宝支付：整合了支付宝支付并且提供了测试账号，可自行测试 - 服务监控：监控服务器的负载情况 - 运维管理：一键部署你的应用 - 新闻管理：发布新闻、评论、标签、类型管理 #### 演示图 <table> <tr> <td><img src="https://blog-me-001.oss-cn-beijing.aliyuncs.com/%E6%88%AA%E5%B1%8F2022-05-08%2014.54.37.png"/></td> <td><img src="https://blog-me-001.oss-cn-beijing.aliyuncs.com/%E6%88%AA%E5%B1%8F2022-05-08%2014.53.56.png"/></td> </tr> </table>
Vue & Element前端项目中的字典列表显示处理
最新发布
HfswCoder的博客
09-16 713
可以将字典数据定义为一个JavaScript对象，其中键表示字典项的值，值表示字典项的显示文本。通过定义字典数据、创建处理方法，并在组件中使用这些方法，我们能够将字典项的值转换为对应的显示文本，从而实现了更友好的用户界面。在Vue和Element前端项目中，经常会遇到需要显示字典列表的情况，例如性别、状态、类型等等。在处理这些字典列表时，我们需要对数据进行适当的处理和展示，以便用户能够直观地理解和操作。字典数据中查找对应的显示文本。该方法接收一个参数，即字典项的值，然后返回对应的显示文本。
基于SpringBoot+Vuejs+element-ui的新闻发布管理系统源码+项目说明.zip
12-29
基于SpringBoot+Vuejs+element-ui的新闻发布管理系统源码+项目说明.zip 项目简介 一个基于 Spring Boot 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue、eladmin的新闻发布管理系统 初始账号密码： admin / 123456 系统功能 用户管理：提供用户的相关配置，新增用户后，默认密码为123456 角色管理：对权限与菜单进行分配，可根据部门设置角色的数据权限 菜单管理：已实现菜单动态路由，后端可配置化，支持多级菜单 部门管理：可配置系统组织架构，树形表格展示 岗位管理：配置各个部门的职位 字典管理：可维护常用一些固定的数据，如：状态，性别等 系统日志：记录用户操作日志与异常日志，方便开发人员定位排错 SQL监控：采用druid 监控数据库访问性能，默认用户名admin，密码123456 定时任务：整合Quartz做定时任务，加入任务日志，任务运行情况一目了然 代码生成：高灵活度生成前后端代码，减少大量重复的工作任务 邮件工具：配合富文本，发送html格式的邮件 七牛云存储：可同步七牛云存储
前后端分离vue前端项目---员工管理系统（vue+springboot+redis）
06-28
vue前端项目---员工管理系统 前端技术栈：ES6、vue、vuex、vue-router、vue-cli、axios、element-ui 后端技术栈：SpringBoot、MyBatis、Spring Security、Jwt 系统划分了超级管理员、HR人事、经理与普通员工四大角色和员工与部门、出勤管理、业绩考核、项目跟进、数据分析、系统管理、系统监控与系统工具八大功能模块。实现的功能更具体的包括有：员工管理、部门管理、岗位管理、菜单管理、角色管理、字典管理、参数管理、通知公告、操作日志、登录日志、在线用户、定时任务、代码生成、系统接口、服务监控、缓存监控、在线构建器、连接池监视。
基于Java(SpringBoot) + Vue(Element UI) + UniApp开发的新零售移动电商系统
04-28
JAVA版商城系统是基于Java(SpringBoot) + Vue(Element UI) + UniApp开发的一套新零售移动电商系统 1:有详细的代码注释，有完整系统手册。 2:基于 SpringBoot 框架开发业界主流。 3:【前端】Web PC 管理端 vue + element UI。 4:【前端】移动端使用 UniApp 框架，前后端分离开发。 5:标准RESTful 接口、标准数据传输，逻辑层次更明确，更多的提高api复用。 6:支持Redis队列，降低流量高峰，解除耦合，高可用。 7:无缝事件机制，行为扩展更方便，方便二次开发。 8:数据导出，方便个性化分析。 9:数据统计分析,使用ECharts图表统计，实现用户、产品、订单、资金等统计分析。 10:权限管理，后台多种角色，多重身份权限管理，权限可以控制到按钮级别的操作。 11:Vue表单生成控件，拖拽配置表单，减少前端重复表单工作量，提高前端开发效率。
ElementUI Tag组件实现多标签生成的方法示例
01-19
现在好多应用场景里会有一些需要给文章打标签等类似的操作，之前jquery用户是使用taginput来实现，使用VUE以后elementui有一个组件非常简单就是tag组件。 {{tag}} <el-input class=input-new-tag v-if=inputVisible v-model=inputValue
vue element ui tag标签组，获取选中值，存入数组
m0_65274248的博客
08-25 7334
vue element ui tag标签组，获取选中值，存入数组
element 2.x组件
~~~的博客
07-24 5388
一、下拉选择框 二、省市级三级联动 三、引入部门信息 四、动态表格 五、导入表格 六、其他组件
若以框架下拉框绑定字典以及页面显示字典的值
m0_63524137的博客
07-26 317
el-table-column label="是否存在腐败和不作为问题并移交纪委" align="center" prop="zxfzFbbzwwt"><el-select v-model="form.zxfzFbbzwwt" placeholder="请输入是否存在腐败和不作为问题并移交纪委"><el-form-item label="是否存在腐败和不作为问题并移交纪委" prop="zxfzFbbzwwt">2form页绑定字典的下拉框。1：页面显示字典的值。
VUE+ElementUI+SpringBoot前后端交互实现动态字典列表
weixin_44172158的博客
10-29 1971
动态从后端获取不同字段数据，并作为各个下拉列表中的可选数据，介绍了前端VUE界面如何引用字段，JS脚本如何循环获取不同字段，java代码中如何实现查询接口，mybatis中如何进行参数切换。
go-admin-ui：基于Gin + Vue + Element UI的前一级分离权限管理系统的前端模块
02-06
go-admin-ui 简介 是一个后台基础模块的前端的实现，它基于实现。它实现了一套最基本的后台权限管理前端的基础模块。可以很快捷的开启自己的项目，不用考虑权限功能如何实现，操作页面如何设计，这里基本上已经满足了，希望能够为大家提供便利。 功能 - 登录 - 退出 - 首页 - 系统管理 - 用户管理 - 菜单管理 - 角色管理 - 部门管理 - 岗位管理 - 字典管理 - 参数设置 - 日志管理 - 登录日志 - 基础信息 - Excel - 系统工具 - 系统接口 - 日历 开发 # 克隆项目 git clone
Element UI 自定义穿梭框的数据项
星海IT学习之路
07-29 4292
文章目录需求官网说明实现效果具体步骤附加需求：调节穿梭框高宽度 需求 官网说明 实现效果 具体步骤 这是我们从数据库查询出来的数据，主要展示我红色框圈起来的字段。 想要带分页的穿梭框可以参考：传送门… 附加需求：调节穿梭框高宽度 由于我们显示的字段是比较长的内容，官网提供的大小不足以满足我们需求，所以想要把穿梭框的大小变大，具体实现如下： <style scoped lang="less"> /* 穿梭框外框高宽度 */ /deep/ .el-transfer-panel{
数据库字典表设计
热门推荐
爬虫 的博客
09-26 3万+
数据库字典表设计 村长大神 发表于2年前     在稍大一些的项目中，我们总是需要管理各种各样的类型类型数据（如商品类型、游戏类型。。。）。对于这些类型的管理类似，如果为每  一种类型都建立一张表去维护（而在项目中，正常出现50种类型），那工作量是可想而之大，并且我们不得不去了解每一个类型表的名字，  以去关联
vue js 动态匹配字典数组中的对应值,渲染到页面（展示不同的值）
ccq的博客
09-14 1429
vue 若依 antdesign 数据动态渲染 字典渲染
怎么通过字典，将后端返回的数据value渲染成对应的label？
ciichen的博客
09-01 2103
怎么通过字典，将后端返回的数据value渲染成对应的label？ 一个项目会用的很多，所以我直接用全局过滤器，代码可以直接复制用哦 1.首先直接po函数出来，这类数据处理的函数可放在一个专门的文件夹里 //根据字典的value显示label //第一个参数是传进的label值，第二个参数是所需的字典 export const findByvalue = (value, dic) => { let result = ''; if (validatenull(dic)) return
在el-table中根据判断不同值显示对应文本
vvv3171071的博客
11-22 2908
后端传来的数据是数据0，1，2。0代表js报错，1代表白屏，2代表其他错误，要求动态显示在表格中 <el-table-column align="center" prop="errorText" label="异常类型" width="150"> <template slot-scope="{row: {errorText}}"> <span v-if="+errorText === 0">js报错</span> <span .
Web前端-el-table-column表格匹配字典数据
MinggeQingchun的博客
07-13 5941
最近初步学习Vue开发web前端的table表格时，想通过字典中数据进行匹配展示，如下 <el-table v-loading="loading" :data="processList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <!--类型匹配转换--> <e
笔记: SpringBoot + VUE实现数据字典展示功能
CJG753951的博客
02-28 3500
最近一直在写前端,写得我贼难受,从能看懂一些基础的代码到整个前端框架撸下来鬼知道我经历了啥(；´д｀)ゞ 项目中所用到的下拉菜单的值全部都是有数据库中的数据字典表来提供的,显示给用户的是的清晰的意思,但是很多实体类中保存的数据都只是"1"或者"0" 下拉菜单部分渲染 <el-col :xs="12" :sm="12" :md="12" :lg="12"> <el-form-...
element-ui+vue字典
09-09
在提供的代码中，引用是关于使用Vue和ElementUI建立一个Vue应用的主要代码。这段代码中，首先引入了Vue和ElementUI，并引入了ElementUI的...根据所提供的代码，element-ui是一个Vue的UI组件库，用于快速搭建用户界面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值