el table column formatter（关于el-table-column的formatter的使用及说明）
导读：el-table-column的formatter的使用 当后端返回来的数据格式需要再去处理；可以使用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 其他
}
}
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！