若依 element-ui table表单字典翻译从数据库获取字典键值，但展示字典标签

碳酸水123

已于 2022-10-26 11:32:01 修改

阅读量2.2k

点赞数 1

文章标签： elementui

于 2022-08-10 00:34:05 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43937851/article/details/126258367

版权

本文介绍如何在Element UI的表格组件中利用插槽特性来显示经过字典翻译的部门名称，通过具体代码示例展示了HTML与JS部分的实现细节。

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

一、实现效果

在这里插入图片描述

二、实现过程

html 代码如下所示：

<el-table-column label="部门" align="center" prop="userDepartment" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.department" :value="scope.row.userDepartment"/>
        </template>
      </el-table-column>

js 代码如下所示：

在这里插入图片描述

三、总结

通过插槽翻译字典值。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

碳酸水123

关注关注

1
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

elementUI table获取字典值

m0_38109616的博客

11-16

358

table列表获取字典值

Element UI 实现字典翻译

qq_36425493的博客

02-25

978

Element UI 实现字典翻译

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

若依页面字典翻译

最新发布

WYT11的博客

04-15

114

在main.js引入，全局挂载。

若依字典值获取

2301_77232932的博客

11-22

1018

dict-tag :options="dict.type.yf_wp_derive_dept" :value="scope.row.derive_dept_id"/> 调用字典组件。:options="dict.type.yf_wp_derive_dept" 对应。:value="scope.row.derive_dept_id" 对应s。

若依字典

飘然生的博客

01-15

3319

<select class="col-sm-12" name="natureProjectFunds" id="natureProjectFunds" th:with="type=${@dict.getType('funding_type')}" onchange="socialChange(this.value)"&...

若依框架获取字典值

weixin_56404022的博客

07-31

2258

若依框架获取字典赋给默认值。

element不占位置的html标签,element-ui table组件嵌入html元素

weixin_39677870的博客

05-30

1242

vue做了一个简单的前端页面，如下图：希望鼠标点实例名，实现自动跳转到oss页面的任务详情链接，这就涉及到html的a标签的href那么在table组件里面怎么去嵌入html的a标签呢？代码如下：其中以下代码就是实现el-table-column组件嵌入html元素:注：scope.row是固定语法，scope.row.task_url就可以得到task_url，scope.row.instanc...

前端笔记-在Element UI中表格如何根据数据动态变化显示

weixin_45849899的博客

08-25

2082

实际上我需要的功能类似于工程中的字典。

前端字段如何动态改变（数据库字典项及Vue相关用法）

Hsssc的博客

10-30

1987

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/

elementUI table 根据值进行渲染（多行采用一种方法）

TUTsmile的博客

11-11

2195

饿了么表单列如下所示 <el-table-column prop="isSuperAdmin" label="超级管理员" :formatter="judgeYesOrNo" width="75"> &lt...

在若依项目中获取单个字典数据label

qq_35220344的博客

04-09

1620

{ "label": "通知", "value": "0", "elTagType": "default", "elTagClass": null }, { "label": "资料", "value": "1", "elTagType": "default", "elTagClass": null }, { "label": "教程", "value": "2", "elTagType": "default", "elTagClass": null } ]显示为：[资料]资料标题。

若依框架Excel列表导出，字段根据字典值翻译解决办法

weixin_44068993的博客

02-27

8098

excel导出根据字典解析

如何在elementUi动态表格table中翻译字典值。vue通用方案

change10000的博客

04-28

6074

实现思路: 先渲染动态行,然后在行里面添加slot插槽，写需要翻译字典的判断。 vue的v-for 的子组件里面 v-if 。注意v-for与v-if不要写在同一标签内。例子:  <el-table style="width: 100%" border :data="tableData"> <template v-for="(item,index) in tableHead">

el-table-column表格匹配字典数据

weixin_69811594的博客

05-08

1267

el-table-column表格匹配字典数据

Web前端之若依Vue3不能及时获取字典值的解决方案、二次封装若依自带的获取字典方法、watchEffect、watch

优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/

01-31

4574

Web前端之若依Vue3不能及时获取字典值的解决方案、二次封装若依自带的获取字典方法、watchEffect、watch

element-ui 下拉框字典翻译

xiaoming4965的博客

04-06

309

element-ui 下拉框字典翻译

若依框架数据字典的使用

qq_43013250的博客

09-01

6354

如果使用数据字典则可以避免这一问题，后端传给前端的数据就是0、1、2 ，在平台数据字典中添加好用户性别字典并添加上性别的数据，男对应1，女对应2，用到的时候只需要先加载数据字典，将加载到的数据存储到数组中，等到需要展示相应的字段信息在前端时只需要：对应字典中的数据翻译对应的值。字典管理是用来维护数据类型的数据，如下拉框、单选按钮、复选框、树选择的数据，方便系统管理员维护。最后只需要在平台的系统管理-字典管理添加上对应的数据字典就可以使用了。2、加载数据字典，可以是多个。

若依vue根据字典Dict的value获取Label，类似于通过key获得value

字节叔叔

09-27

8042

项目需求需要根据字典的value来获取label进行展示，若依提供了selectDictLabel, selectDictLabels两个方法通过value获取label。

element UI表格el-table-column动态数据翻译

记录本人工作中遇到的问题、经验总结以及分享。

04-20

1670

this.facilitatorList数据如下。