el-table对特定列结果格式化

原创于 2023-06-16 10:57:21 发布 · 404 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

文章讲述了在前端使用el-table组件展示从后端获取的数据时，如何通过formatter方法对特定字段，如岗位类别和岗位职级的数字进行格式化，以显示其实际含义，例如将数字1和2分别转换为Ⅰ类/关键和Ⅱ类/非关键等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用el-table展示后端的查询结果时，有些只是符号，没有格式化
在这里插入图片描述
如图的岗位类别和岗位职级字段的数字都是有其他含义的
这时可以用:formatter来格式化，如下代码：

<el-table id="outTable100" class="main-table" :data="tableData" border v-loading="loading" ref="mytable">>
      <el-table-column sortable="custom" v-for="(column, index) in columns" :key="`column-${index}`"
                       :label="column.label" :property="column.property"  :formatter="statusFormatter"

 statusFormatter(row, column,cellValue,index) {
        if(column.label =='岗位类别'){
          let statu = row.jobType;
          if(statu == '1'){
            return 'Ⅰ类/关键'
          } else if(statu == '2'){
            return 'Ⅱ类/非关键'
          }else{
            return 'Ⅲ类'
          }
        }else if (column.label =='岗位职级'){
          let statu = row.rankType;
          if(statu == '1'){
            return '技工'
          } else if(statu == '2'){
            return '领班'
          }else {
            return '技师'
          }
        } else{
          return  cellValue
        }
      },

效果如下：
在这里插入图片描述