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

最新推荐文章于 2024-10-15 08:00:00 发布

布尔程

最新推荐文章于 2024-10-15 08:00:00 发布

阅读量6.4k

点赞数 1

分类专栏：前端 Vue 文章标签： vue+element el-table 列格式化列字段翻译 formatter

本文链接：https://blog.youkuaiyun.com/William0326/article/details/102486374

版权

本文介绍了如何在Vue+Element项目中利用el-table-column的formatter属性实现列字段的界面翻译和日期格式化，避免了后台处理导致的查询速度慢问题。通过自定义gDatasFormatter方法结合数据字典，实现了翻译功能，并指出日期格式化的处理方式，提供了一种简单通用的解决方案。

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

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

<el-table-column  label="材料" prop="material" align="center" min-width="150" show-overflow-tooltip 
:formatter="((row,column)=>{return gDatasFormatter(row,column,shellMaterialOpts)})">
</el-table-column>

上图中代码 :formatter="((row,column)=>{return gDatasFormatter(row,column,shellMaterialOpts)})" 就是今天要说的重点，重构了formatter属性的方法，自己传入对应列的字典数组数据