一篇关于el-table-column的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 '其他'
     }

   }

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

您可能有感兴趣的文章
vue如何使用Office Web如何实现线上文件预览

vue3.x如何使用swiper如何实现卡片轮播

Vue生产和开发环境如何切换及过滤器的如何使用

如何使用vue如何实现计时器功能

Vue新一代状态管理工具Pinia的具体如何使用