提供武汉手机网站建设/app推广注册赚钱

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-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="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-columnprop="name"label="姓名"width="180"></el-table-column><el-table-column    label="性别" :formatter="(row) => codeFormatter(row.sex,this.sexOptions)" ></el-table-column><el-table-columnlabel="状态" :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