Vue项目Element表格对应字段映射显示方法:formatter格式化数据问题
更新时间：2024年07月18日 09:42:31 作者：无忧好奇猫
这篇文章主要介绍了Vue项目Element表格对应字段映射显示方法:formatter格式化数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue项目Element表格对应字段映射显示:formatter格式化数据
需求：
- 表格中会员性别字段的值是"0"时显示"男"，值是"1"时显示"女"
在标签内加：formatter="item.formatter"属性
<el-table-column v-for="item in tableColumns" :key="item.value" :prop="item.value" :align="item.align" :label="item.label" :formatter="item.formatter" > </el-table-column>
在要遍历的数据后面加一个formatter方法
formatter: function(row,column,value,index) {
if (value == '0') {
return "男"
}else if (value == '1') {
return '女'
}
}
el-table带其它参数的formatter格式化数据显示
el-table中使用带默认参数的formatter格式化数据显示
<el-table-column class="input-width" label="运营单位" prop="corpId" min-width="120" :formatter="formatCorp" />
formatCorp(row) {
return this.corpList.length > 0 && row.corpId ? this.corpList.find((item) => item.corpNo == row.corpId).corpName : '';
}el-table中使用带其它参数的formatter格式化数据显示
<el-table-column label="运营单位" prop="corpId" min-width="120" :formatter="(row, column) => formatCorp(row, column, corpList)" />
formatCorp(row, column, corpList) {
return corpList.length > 0 && row.corpId ? corpList.find((item) => item.corpNo == row.corpId).corpName : '';
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
路由跳转的同时传递参数是比较常见的,下面这篇文章主要给大家介绍了关于vue3路由配置以及路由跳转传参的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章主要为大家详细介绍了Vue实现点击当前行变色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了Vue开发网站seo优化方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
关于el-table-column的formatter的使用及说明
这篇文章主要介绍了关于el-table-column的formatter的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了vue-video-player视频播放器的使用和配置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了Vue实现前端页面缓存的过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue install 注册全局组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
本文主要介绍了vue中process.env的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
使用element+vuedraggable实现图片上传拖拽排序
这篇文章主要为大家详细介绍了使用element+vuedraggable实现图片上传拖拽排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了Vue中watchEffect的追踪逻辑,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
最新评论