elementui formatter
ElementUI 表格列内容格式化（formatter）
ElementUI 的表格组件（el-table）提供了 formatter 属性，用于对列数据进行自定义格式化处理。该属性接收一个函数，函数参数为当前行数据、当前列配置和单元格值，返回格式化后的内容。
基本用法
在 el-table-column 中定义 formatter 函数：
<el-table :data="tableData">
<el-table-column prop="date" label="日期" :formatter="formatDate"></el-table-column>
</el-table>对应的 JavaScript 方法：
methods: {
formatDate(row, column, cellValue) {
// 对日期进行格式化处理
return new Date(cellValue).toLocaleDateString()
}
}格式化数值
格式化数值为货币格式：
formatCurrency(row, column, cellValue) {
return '￥' + cellValue.toFixed(2)
}格式化状态
将状态码转换为文字描述：
formatStatus(row, column, cellValue) {
const statusMap = {
0: '未开始',
1: '进行中',
2: '已完成'
}
return statusMap[cellValue] || '未知状态'
}多参数格式化
结合多个字段进行格式化：
formatFullName(row, column, cellValue) {
return `${row.firstName} ${row.lastName}`
}使用第三方库
结合 moment.js 格式化日期：
import moment from 'moment'
formatDateTime(row, column, cellValue) {
return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
}注意事项
- formatter 函数应保持纯函数特性，避免副作用
- 复杂格式化逻辑建议提取到单独的工具函数中
- 性能敏感场景应考虑缓存格式化结果
- 国际化场景建议结合 i18n 使用
替代方案
对于更复杂的格式化需求，可以考虑使用 scoped slots：
<el-table-column prop="date" label="日期">
<template slot-scope="scope">
{{ customFormat(scope.row.date) }}
</template>
</el-table-column>
