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-column的formatter的使用及说明

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

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。