关于el-table-column的formatter的使用及说明
https://www.jb51.net/article/264429.htm
el-table-column的formatter的使用
当后端返回来的数据格式需要再去处理；可以使用formatter属性
eg：
1 2 3 4 5 6 7 8 9 | 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之前：
代码如下（示例）：
1 2 3 4 5 6 7 8 9 10 11 | <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中：
1 2 3 | <el-table :data="tabledata"> <el-table-column label="类型" :formatter="typeFormatter" prop="type"></el-table-column> </el-table> |
methods中：
1 2 3 4 5 6 7 8 9 10 11 12 | //规范化类型 默认有四个参数（row, column, cellValue, index）详情可以查看elmentUI官网 typeFormatter(row){ switch(row.type){ case '1': return '菜单' case '2': return '按钮' default: return '其他' } } |
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
