关于el-table-column的formatter的使用及说明

目录 el-table-column的formatter的使用 el-table的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 '其他'
?? ? ? ? ? ?}

? ? ? }

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

查看更多关于关于el-table-column的formatter的使用及说明的详细内容...