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

最新推荐文章于 2024-05-28 14:09:03 发布
最新推荐文章于 2024-05-28 14:09:03 发布
阅读量705 收藏 7
点赞数 7
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Missbelover/article/details/136580248
版权
本文讨论了在开发过程中，如何在项目的详情页面中通过标签，利用label和value属性，特别是当字典类型为rcpc_enterprise_type且对应的值来自form.seType时，实现数据字典的label值的显示。
摘要由CSDN通过智能技术生成

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

通过 <dict-tag/> 标签进行回显
<dict-tag  class="tag-style" :options="dict.type.rcpc_enterprise_type" :value="form.seType" />
今天星期八
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue & Element前端项目中的字典列表显示处理
HfswCoder的博客
09-16 881
可以将字典数据定义为一个JavaScript对象，其中键表示字典项的值，值表示字典项的显示文本。通过定义字典数据、创建处理方法，并在组件中使用这些方法，我们能够将字典项的值转换为对应的显示文本，从而实现了更友好的用户界面。在Vue和Element前端项目中，经常会遇到需要显示字典列表的情况，例如性别、状态、类型等等。在处理这些字典列表时，我们需要对数据进行适当的处理和展示，以便用户能够直观地理解和操作。字典数据中查找对应的显示文本。该方法接收一个参数，即字典项的值，然后返回对应的显示文本。
go-admin-ui：基于Gin + Vue + Element UI的前一级分离权限管理系统的前端模块
02-06
可以很快捷的开启自己的项目，不用考虑权限功能如何实现，操作页面如何设计，这里基本上已经满足了，希望能够为大家提供便利。功能- 登录- 退出- 首页- 系统管理 - 用户管理 - 菜单管理 - 角色管理 - 部门管理 - ...
vue element ui tag标签组，获取选中值，存入数组
m0_65274248的博客
08-25 8123
vue element ui tag标签组，获取选中值，存入数组
el-select，大数据量性能优化，字典非展示态识别以及中文回显
最新发布
qq_43342477的博客
05-28 355
前段时间工作中遇到性能优化的问题，其中，因为页面打开一瞬间，需要同时大量展示下拉，会导致页面响应过慢问题，所以争对下拉做一些优化（这里的组件为element里的el-select组件）
若依前端-APP中使用数据字典
yqj234的专栏
05-07 1080
4.2 在要显示标签的地方，写下dict-tag标签的语法，vaule属性可以使用变量。4.1 定义字典的内容。
element 2.x组件
~~~的博客
07-24 6103
一、下拉选择框 二、省市级三级联动 三、引入部门信息 四、动态表格 五、导入表格 六、其他组件
java-elementUI抽屉/数据字典
weixin_49319251的博客
11-01 2600
数据字典 描述：每行双击可打开内层抽屉 架构：前后端分离 前台框架：elementUi、Vue 后台框架：springboot、ssm 项目管理工具：maven 代码管理工具：git 前端代码如下： <template> <section> <!--高级查询--> <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-i
Element ui Table表格匹配字典项中的数据
杨振洲的博客
07-15 7228
在工作中通常会遇到Table表格匹配字典项中的数据这里介绍几种方法大家仅供参考 <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="type" label="类型"
ruoyi-vue前端数据字典值引用与回显（列表中回显，多选框回显）
qq3892997的博客
11-08 3504
代码： 2. 编辑页面多选框回显 代码：
Vue + element实现业务字典值渲染下拉框并回显
7c
06-25 2387
通过业务字典值的方式渲染Vue前端下拉框的展示和回显，简单详细,复制即用！！！
js vue数据回显函数封装（字典翻译）
Xiao_XianYu_的博客
02-23 1378
//值和id的名字需要和回显函数的值和id对应 //数据格式(该案例值为：dictValue；id为：dictLabel) deptList: [ { dictValue: 2, dictLabel: '移动' }, { dictValue: 3, dictLabel: '联通' }, { dictValue: 4, dictLabel: '电信' }, { dictValue: 1, dictLabel: '铁塔' }], //方法： selectDictLabel(datas, v...
基于SpringBoot+Vuejs+element-ui的新闻发布管理系统源码+项目说明.zip
12-29
基于SpringBoot+Vuejs+element-ui的新闻发布管理系统源码+项目说明.zip 项目简介 一个基于 Spring Boot 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue、eladmin的新闻发布管理系统 初始账号密码： admin /...
基于spring-boot+vuejs+element-ui的新闻发布管理系统源码+项目说明.zip
01-08
1、基于spring-boot+vuejs+element-ui的新闻发布管理系统源码+项目说明.zip 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，...
基于Java(SpringBoot) + Vue(Element UI) + UniApp开发的新零售移动电商系统
04-28
JAVA版商城系统是基于Java(SpringBoot) + Vue(Element UI) + UniApp开发的一套新零售移动电商系统 1:有详细的代码注释，有完整系统手册。 2:基于 SpringBoot 框架开发业界主流。 3:【前端】Web PC 管理端 vue + ...
前后端分离vue前端项目---员工管理系统（vue+springboot+redis）
06-28
前端技术栈：ES6、vue、vuex、vue-router、vue-cli、axios、element-ui 后端技术栈：SpringBoot、MyBatis、Spring Security、Jwt 系统划分了超级管理员、HR人事、经理与普通员工四大角色和员工与部门、出勤管理、...
elementui select 数据回显匹配数据字典不显示label值，显示的是数字
weixin_44249754的博客
09-15 1664
原因就是前后端没有协调好字段类型，前端需要string类型，后端返回了bumber类型，转换一下即可。
Vue弹窗修改数据，数据回显字典项数字
weixin_48907405的博客
05-24 467
在做修改功能的时候，弹窗回显数据，字典项显示数组不显示对应的中文。
vue3项目中的字典功能
fatfish517的博客
04-27 2928
若依平台的字典模块使用简洁便利，但是仍存在一些有待改进的地方： - 该模块使用minxin方法在vue3中已不再被提倡； - 模块阅读难度较大。主要是个人水平所限； - 无法在el-table-column的filters中使用； - 无常用自定义常量的功能，如布尔型变量的展示； - 不能处理后台枚举类型数据； - 未实现数据持久化处理，需要不断请求后台数据；
字典回显避免重复调用后台接口
采花小盗周的博客
09-07 433
解决前端项目，表格中或页面中多次使用到字典回显，同时多次调用后台字典接口的问题
element-ui+vue字典
09-09
在提供的代码中，引用是关于使用Vue和ElementUI建立一个Vue应用的主要代码。这段代码中，首先引入了Vue和ElementUI，并引入了ElementUI的CSS样式。然后，将VueAxios和axios添加为Vue插件，并注册了ElementUI。接下来，创建了一个Vue实例，并将其挂载到id为"app"的DOM元素上。在Vue实例中，还定义了一个名为Bus的自定义事件总线对象，用于父子组件之间的通信。最后，导出axios。 而引用是关于Vue应用的根组件App.vue的代码。这段代码中，定义了一个名为App的组件，并在模板中使用了<router-view/>来展示路由对应的组件。在样式中，设置了一些字体样式和对齐方式。 引用是关于一个子菜单User.vue的代码。这段代码中，定义了一个名为User的组件，并在模板中展示了一个h1标题和一个显示当前时间戳的文本。在样式中，设置了文本的对齐方式。 根据所提供的代码，element-ui是一个Vue的UI组件库，用于快速搭建用户界面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值