关于el-table-column的formatter的使用及说明 <el-table-column label="性别" align="center" :formatter="gendarFomat"></el-table-column>

关于el-table-column的formatter的使用及说明
https://www.jb51.net/article/264429.htm

+

目录

• el-table-column的formatter的使用
• el-table的formatter属性用法
• formatter是什么？
• 详细使用

el-table-column的formatter的使用

当后端返回来的数据格式需要再去处理；可以使用formatter属性

?

1	<el-table-column label="性别" align="center" :formatter="gendarFomat"></el-table-column>

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 '其他'             }         }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

• vue中el-table格式化el-table-column内容的三种方法
• Element el-table的formatter和scope template不能同时存在问题解决办法
• 详解VUE 对element-ui中的ElTableColumn扩展