el-table-column字段格式化转换，formatter属性使用

el-table-column字段格式化转换，formatter属性使用

el-table-column是element ui框架中table的子元素，用于控制单列字段的展示，本文介绍el-table-column的formatter属性的使用

element ui的table-column官方文档地址：https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes

1. table-column formatter属性介绍

下面是element ui官方文档的描述

参数	说明	类型	可选值	默认值
formatter	用来格式化内容	Function(row, column, cellValue, index)	—	—

2. 使用方式

2.1. 无传参方式

2.1.1. 代码示例

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
       <el-table-column
        prop="status"
        label="状态" :formatter='statusFormatter' >
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
        methods: {
     	 statusFormatter(row, column, cellValue, index) {
         if('0' === cellValue){
           return 'offline'
         }else if('1' === cellValue){
           return 'online'
         }
         return '-';
      }
    },
      data() {
        return {
          tableData: [{
            name: '王小虎',
            status: '1'
          }, {
            name: '王大虎',
            status: '0'
          }]
        }
      }
    }
  </script>

2.1.2. 效果

姓名	状态
王小虎	online
王大虎	offline

2.2. 带传参数方式

2.2.1. 代码示例

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
       <el-table-column    
        label="性别" :formatter="(row) => codeFormatter(row.sex,this.sexOptions)" >
      </el-table-column>
       <el-table-column
        label="状态" :formatter="(row) => codeFormatter(row.status,this.statusOptions)" >
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
       methods: {
     	 codeFormatter(code, options) {
         	for(let i=0;i<options.length;i++){
             	let option = options[i]
         	    if(option!=null && option.code === code){
         	   	 return option.label
         	   }
         	}
         return '-';
      }
    },
      data() {
        return {
          tableData: [{
            name: '王小美',
            sex: 0,
            status: '1'
          }, {
            name: '王大虎',
            sex: 1,
            status: '0'
          }],
          sexOptions: [{
             code: 0,
             label: '女'
          }, {
             code: 1,
             label: '男'
          }],
          statusOptions: [{
            code: '0',
            label: 'offline'
          }, {
            code: '1',
            label: 'online'
          }]
        }
      }
    }
  </script>

2.2.2. 效果

姓名	性别	状态
王小美	女	online
王大虎	男	offline