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

　康　

已于 2023-07-01 12:01:36 修改

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue.js elementui

于 2022-04-20 16:05:18 首次发布

本文链接：https://blog.csdn.net/qq_40047019/article/details/124299882

版权

vue 专栏收录该内容

29 篇文章 3 订阅

订阅专栏

<el-table-column prop="sj_uid" label="服务商ID" :formatter="stateFormat" sortable></el-table-column>

methods：

stateFormat(row, column) {
	return this.facilitatorList.map((item, index) => {
		if (row.sj_uid == item.uid) {
			return item.uname;
		}
	});
},

this.facilitatorList数据如下

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

　康　

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
element UI表格el-table-column动态数据翻译

this.facilitatorList数据如下。
复制链接

扫一扫

专栏目录

vue+element实现el-table-column列字段界面翻译及日期格式化

William0326的博客

10-10

6200

通常在项目中要进行大量的数据查询且界面显示的内容要是翻译后的值或需要格式化成指定格式，这其中查询速度是个比较头疼的问题，如果所有列在查询的过程中后台翻译好了再传到前端界面显示，那势必查询速度很慢，本人在项目中就遇到了这个问题，那怎么解决这个问题呢？经过分析研究，查询element-ui官网el-table的相关api发现，其实可以借助 el-table-column ...

vue中表格el-table-column动态数据翻译 stateFormat

chen16432的博客

05-11

1808

element 表格动态数据翻译 <el-table-column :formatter="stateFormat" align="center" prop="typeId" label="类型" min-width="5%" ></el-table-column> stateFormat(row, column) { return this..

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

vue表格el-table-column数据翻译字段

zhy的博客

06-12

1万+

state传来的是码值，需要转换成汉字，如：1转为成功，2转为失败<el-table-column align="center" min-width="100px" label="状态" prop="state" :formatter = "stateFormat"> </el-table-column>使用 :formatter = &qu

el-table 对内容进行转译

lemon_bubbly的博客

04-16

2069

在el-table-column上添加：formatter = "dateFormat"methods: { dateFormat () { if (a===b) { return c } else { rerurn d } } }...

el-table使用formatter翻译字典值封装方法

weixin_37252943的博客

01-22

1703

做数据类统计页面中，时常会碰见需要根据管理平台中的字典，将el-table中的数据项进行翻译，若每个页面内都写一遍formatter方法又没必要，所以在此提供封装后的方法 1.el-table中使用formatter <el-table-column prop="value" label="目标" :formatter="dictionartsTranslate"> //目标字典 dictionary: [{ key: '是', label: 'yes' }, {

vue中表格el-table-column数据翻译字段

宫宏伟的博客

07-09

2732

vue中表格el-table-column数据翻译字段以上是显示后台返回的1 or 0 需求是要求从1和0 改成已审核和未审核使用 :formatter = “stateFormat” 在methods区： methods: { stateFormat(row, column) { if (row.isstate === 0) { 　　　　　　　　return ‘未审核’ 　　　　　　} ...

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

change10000的博客

04-28

5320

实现思路: 先渲染动态行,然后在行里面添加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">

VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

10-17

这样，我们就实现了`el-table`的动态列渲染，可以根据实际数据动态生成列，并且能够根据列标题自动调整宽度。这样的实现方式不仅简化了代码，也为后期可能的自定义拖拽配置动态列提供了便利。总之，理解并熟练掌握...

element-ui表格合并span-method的实现方法

10-16

在Element-UI框架中，表格（`el-table`）组件提供了强大的功能，其中包括表格单元格的合并。在处理复杂表格布局时，有时我们需要合并某些行或列以展示更清晰的数据结构。`span-method`属性正是为此目的而设计的，它...

element-ui表格列金额显示两位小数的方法

10-18

对于Element-UI的表格，我们可以在`el-table-column`的`slot-scope`内使用`scope`对象来访问当前行的数据。例如，如果`payPrice`字段是以分表示的，我们可以这样处理： ```html <el-table-column prop="payPrice" ...

监听element-ui table滚动事件的方法

10-17

本文将详细介绍如何监听Element-UI的Table组件的滚动事件，以便在用户滚动到表格底部时动态加载更多数据。 ### 背景在大数据展示场景中，为了提高页面性能和用户体验，通常会采用分页或无限滚动的方式来加载数据。...

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

weixin_43937851的博客

08-10

1953

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

elementUI中table表格内容，将数字转换为文字tag

laoayu的博客

11-09

652

实现功能当状态内有内容是，根据匹配转成对应的文字，当状态无内容时，则不显示tag标签。

VUE 枚举(状态)翻译指令/组件

qq_31565213的博客

08-07

1103

开发由来经常在项目中需要将一些状态类型数据翻译成文字展示给用户。写v-if之类的太过繁琐，要是定义变了那就更麻烦了。所以写了一个枚举（Java后端叫法，通常将一些内容定义到一个枚举类，标识一个状态的所有可能属性内容）翻译指令。所包含的内容一个工具类（EntityUtils.js）。一个指令（enumeration.js）。枚举工具类（EntityUtils.js） function Utils() { this.STATUS = Object.freeze({ "APP

ant-design-vue之中＜a-table＞标签自带的分页如何变为中文

wsdnnnnnnnnn的博客

05-09

1848

a-table :pagination="pagination">自带的分页器默认语言是英文，但是需求需要变为中文，需要使用a-config-provider标签来将分页器变为中文。

v-for 中el-table遍历自定义的列，嵌套显示

u012746918的博客

05-26

1981

colunmName: ['澳中线-悉尼-仓库', '澳中线-悉尼-仓库1'], totalNumber: 100, data: [{ list: [ { name: '澳中线-悉尼-仓库1...

vue 数据字典翻译表格数据处理的两种方法

Lingling_12356的博客

11-27

3956

第一种: <el-table :data="teacherList"> <el-table-column label="姓名" align="center" prop="teacherName" min-width="70"> </el-table-column> <el-table-column label="性别" align="center" pr

element-ui 下拉框字典翻译

xiaoming4965的博客

04-06

232

element-ui 下拉框字典翻译

el-table-column动态加载列