关于el-table-column的formatter的使用及说明
更新时间：2022年10月08日 10:27:23 作者：RAY_CHEN.
这篇文章主要介绍了关于el-table-column的formatter的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
el-table-column的formatter的使用
当后端返回来的数据格式需要再去处理；可以使用formatter属性
<el-table-column label="性别" align="center" :formatter="gendarFomat"></el-table-column>
eg：
gendarFomat(row, column) {
if (row.gender == 0) {
return "女";
} else if (row.gender == 1) {
return "男";
} else {
return "-";
}
},element-ui官网说明
el-table的formatter属性用法
formatter是什么？
formatter是el-table-column的一个属性，用来格式化内容。（比如后台给你返0或1，你需要展示成“否”和“是”）
详细使用
1.知道formatter之前：
代码如下（示例）：
<el-table :data="tabledata"> <el-table-column label="类型" prop="type"> <template slot-scope="scope"> <span> <span v-if="scope.row.type === '1'">菜单</span> <span v-else-if="scope.row.type === '2'">按钮</span> <span v-else>其他</span> </span> </template> </el-table-column> </el-table>
2.知道formatter之后，以上代码就可以改写为：
html中：
<el-table :data="tabledata"> <el-table-column label="类型" :formatter="typeFormatter" prop="type"></el-table-column> </el-table>
methods中：
//规范化类型 默认有四个参数（row, column, cellValue, index）详情可以查看elmentUI官网
typeFormatter(row){
switch(row.type){
case '1':
return '菜单'
case '2':
return '按钮'
default:
return '其他'
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
公司最近有一个H5页面的功能，比较简单的一个调查表功能，嵌套在我们微信公众号里面。这篇文章主要介绍了使用vue完成微信公众号网页小记,需要的朋友可以参考下2019-04-04
Vue3之Vite中由element ui更新导致的启动报错解决
这篇文章主要介绍了Vue3之Vite中由element ui更新导致的启动报错解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
本文通过实例代码给大家详细介绍了Vue2.5通过json文件读取数据的方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧2018-02-02
虚拟列表只渲染当前可视区域的列表,并不会将所有的数据渲染,本文主要介绍了vue简单实现一个虚拟列表的示例代码,具有一定的参考价值,感兴趣的可以了解一下2024-03-03
这篇文章主要介绍了Vue实现Header渐隐渐现效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
Unocss(原子化css) 使用及vue3 + vite + ts讲解
这篇文章主要介绍了Unocss(原子化css)使用vue3 + vite + ts的方法,简单介绍了Unocss使用及图标库使用，通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-11-11
Vue提供了一种更通用的方式来观察和响应当前活动的实例上的数据变动:侦听属性,下面这篇文章主要给大家介绍了关于Vue3.0多种侦听方式的相关资料,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了Vue基本指令实例图文讲解，文章将基本指令讲解的很清楚，有对于指令不太懂的同学可以跟着学习研究下2021-02-02
这篇文章主要介绍了vue中路由跳转不计入history的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
下面小编就为大家分享一篇基于vue 开发中出现警告问题去除方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
最新评论